利用 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，常用插件：

  • 创建 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.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 来删除文件/目录

  • 压缩文件

  • 复制其他文件到 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/

参考资料

posted @ 2016-06-05 23:15  五艺  阅读(154)  评论(0)    收藏  举报