前端自动化工具gulp入门基础

gulp是前端开发过程当中常常要用到的工具，很是值得花时间去掌握。利用gulp，咱们可使产品流程脚本化，节约大量的时间，有条不紊地进行业务开发。本文简单讲一下入门gulp须要掌握的东西。

安装gulp

首先，咱们须要在全局安装gulp。

npm install -g gulp

而后，咱们切到项目根目录，在项目中也进行gulp的安装，代表项目对gulp的依赖。

npm install --save-dev gulp

接着，咱们在项目根目录里新建一个gulpfile.js文件，这个是gulp的配置文件。

使用gulp

学习gulp的使用，咱们须要先学习好经常使用的语法。

gulp.src(globs[, options])

输出符合所匹配模式（glob）的文件。将返回一个stream，能够被piped传递到其余gulp插件中继续操做。

gulp.task(name[, deps], fn)

定义一个gulp任务，name是任务名称。[, deps]是任务依赖。fn是任务回调函数。
（1）任务依赖的形式能够是：

gulp.task('two', ['one'], function() {
    // 'one' 完成后
});
gulp.task('one', function(cb) {
    // cb();
    // return stream;
    // return promise;
});

其中one应该使用一个callback，或者返回一个promise 或stream，代表依赖的任务完成了。
（2）回调函数体会是这种形式：

gulp.src().pipe(someplugin())

gulp.dest(path[, options])

将pipe进来的stream输出文件到指定的路径下,如：

gulp.src('./client/templates/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('./build/templates'))

gulp.watch

gulp.watch(glob [, opts], tasks)

监视文件，而且在文件发生改动时候执行一个或者多个task。监听change事件实现。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp.watch(glob [, opts, cb])

监视文件，而且在文件发生改动时候执行回调函数cb。

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp.run

gulp模块的run方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。任务是尽量多的并行执行，而且可能不会按照指定的顺序执行。当不须要指定执行顺序时，能够适当使用。

gulp.run('task1','task2','task3');

gulp使用技巧

替代任务依赖写法

咱们须要让任务有秩序地执行，那么可使用第三方插件gulp-sequence。

// 若是使用gulp-sequence，就不须要附加任务依赖了。数组内的任务平行执行，数组外的按顺序执行。因此这里是svgstore、uglify-js并行执行，而后执行public任务。
gulp.task('sequence1', function() {
  sequence(['svgstore', 'uglify-js'], 'public');
});

修复gulp.watch方法只执行一次的问题

利用gulp-watch，gulp-batch两个工具，用法以下：

// 当监听到svgs目录下任意svg文件变更时，执行svgstore任务
gulp.task('watch', function() {
    watch('./assets/svgs/*.svg', batch(function(events, done) {
        gulp.start('svgstore', done);
    }));
});