ZuoZuomu

仰望星空,也得脚踏实地。

后台
文章详情

前端gulp自动化工具

2018-08-04

是什么?

gulp是一个前端自动化构建工具,可以帮助我们完成代码压缩、JS转换、CSS添加浏览器操作等工作。

怎么用?

安装:

cnpm install gulp --save-dev

使用: 新建gulpfile.js配置文件

const gulp = require('gulp');

// 一般将default任务作为入口
gulp.task('default',() => {
    gulp.start(['task1','task2',...]);
});

监听

当文件发生改变的时候我们可以监听其变化,自动构建代码。

gulp.task('watch', () => { 
    const watcher = gulp.watch('src/**/*', ['default']);
    watcher.on('change', (event) => {
        console.warn(`File ${event.path} was ${event.type}!`);
    });
});

这个时候启动方式就得变一变啦:

npm run gulp watch

一个小栗子

项目中有一个入口文件(app.js),我们需要处理依赖关系,转换js语法,并且将文件压缩,最后输出到指定的目录,这样一个流程使用gulp怎么做呢?

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
var browserify = require('gulp-browserify');


// 处理项目依赖
gulp.task('scripts', function() {
    // 单一文件入口
    gulp.src('src/app.js')
        .pipe(browserify({
          insertGlobals : true,
          debug : !gulp.env.production
        }))
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

前端代码测试

NodeJS中的断言可以帮助我们解决一些问题,在实际开发中需要使用一些用于测试的库。

const { should,expect,assert } = require('chai');

// 测试一个函数的返回值是否为我们所期望的
should();

add(2, 3).should.equal(5);
expect(add(2, 3)).to.be(5);
assert.equal(add(2, 3),5);

测试框架

mocha

describe('#test', function() {
    describe('add', function() {
        it('should return 5 when 2 + 3',() => {
            expect(add(2, 3), 5);
        });
    });
});
保持简单
博客升级改造
秘钥: