利用 Gulp 處理前端工做流程

基本用法

// gulpfile.js
gulp.task('foo', function() {
    gulp.src(glob)
        .pipe(...)
        .pipe(...)
        .pipe(gulp.dest(...))
        .pipe(...)
        .pipe(gulp.dest(...))
});

// shell
$ gulp foo

基本 API

• gulp.src(glob[, options])

  • 根據 glob 匹配文件，返回 stream，能夠經過 .pipe() 方法傳遞給後續的插件。

• gulp.dest(path[, options])

  • 通常用法 .pipe(gulp.dest(path))，把 pipe 中的內容按照指定的 path 寫成文件，會自動建立不存在的文件夾。

  • 注意，能夠經過 .pipe 屢次指定輸出的地方，具體請看 這裏

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

  • 定義名爲 name 的任務，定義以後就能夠在命令行中使用 gulp xxx 來執行任務。

  • deps 裏面的任務所有完成後纔會執行 fn

  • deps 裏面的任務都是並行執行的，若是須要順序執行，須要特殊寫法。具體看 這裏

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

  • 監聽文件變化

  • 不會監聽新文件（目錄），因此通常你會須要 gulp-watch

經常使用命令 （自定義）

# for development mode
gulp server

# run test
gulp test

# for production mode
gulp build

gulp server 流程

• 把 less, sass, 之類的文件編譯成 CSS，經常使用插件：

  • gulp-less

  • gulp-sass

• 建立 Web Server (with Live Reload)，經常使用：

  • gulp-connect，用來建立 Web Server，其實還有其餘選擇的，但多數都是利用 connect 來建立 Web Server 的。

  • node-proxy-middle，用來代理請求，能夠把 /api/xxx 發送到指定的地址。(經常使用於 SPA 開發)

  • connect-modrewrite，匹配資源，若是不匹配就能夠重定向到指定地址。(經常使用於 SPA 開發)

  • connect-history-api-fallback，做用同上，也用於匹配資源，但用起來簡單不少。(經常使用於 SPA 開發)

• 監聽文件變化，經常使用插件：

  • gulp-watch

示例代碼

gulp.task('clean:css', function () {
    del.sync('app/styles/*.css');
});

gulp.task('less', ['clean:css'], function () {
    var stream = gulp
            .src('app/styles/main.less')
            .pipe(less())
            .pipe(gulp.dest('app/styles/'));
    return stream;
});

gulp.task('connect', function () {
    connect.server({
        root: './app',
        port: 9000,
        livereload: true,
        middleware: function (connect, o) {
            return [
                (function () {
                    var url = require('url');
                    var proxy = require('proxy-middleware');
                    var options = url.parse('http://localhost:3000/api');
                    options.route = '/api';
                    return proxy(options);
                })(),
                modRewrite([
                    '!\\.html|\\.js|\\.css|\\.swf|\\.jp(e?)g|\\.png|\\.gif|\\.eot|\\.woff|\\.ttf|\\.svg$ /index.html'
                ])
            ];
        }
    });
});

gulp.task('watch', function () {
    gulp
        .src('app/styles/**/*.less', {read: false})
        .pipe(watch('app/styles/**/*.less', function () {
            return gulp
                .src('app/styles/main.less')
                .pipe(less())
                .pipe(gulp.dest('app/styles/'))
                .pipe(connect.reload());
        }));

    gulp
        .src(['app/scripts/**/*.js', 'app/**/*.html'])
        .pipe(watch(['app/scripts/**/*.js', 'app/**/*.html']))
        .pipe(plumber())
        .pipe(connect.reload());
});

gulp.task('server', ['less', 'connect', 'watch']);

gulp build 流程

• 清理 dist/ 文件夾

  • del，根據 glob 來刪除文件/目錄

• 壓縮文件

  • gulp-htmlmin，壓縮 html 文件

  • gulp-minify-html，同上

  • gulp-cssmin，壓縮 css 文件

  • gulp-minify-css，同上，封裝了 clean-css，star 比上面的多

  • gulp-uglify，混淆 JavaScript 代碼

  • gulp-usemin，合併指定 block 中的文件

  • gulp-rev，給靜態文件加上版本號，如 app.js -> app-d41d8cd98f.js

• 複製其餘文件到 dist/

  • gulp.src(...).pipe(gulp.dest(...))

實例代碼

gulp.task('clean:build', function () {
    del.sync('dist/', {force: true});
});

gulp.task('minify', ['clean:build', 'less'], function () {
    gulp
        .src('app/views/**/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist/views'));

    gulp
        .src('app/index.html')
        .pipe(usemin({
            js: [uglify(), rev()],
            css: [minifyCss(), 'concat', rev()]
        }))
        .pipe(gulp.dest('dist/'));
});

gulp.task('copyfonts', function () {
    gulp
        .src('app/styles/fonts/*')
        .pipe(gulp.dest('dist/fonts/'));
});

gulp.task('build', ['clean:build', 'minify', 'copyfonts']);

出處

https://scarletsky.github.io/2015/08/14/use-gulp-for-front-end-workflow/

參考資料

英文文檔
中文文檔