前端自動化工具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);
    }));
});