基础用法

// 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/

参考资料

英文文档
中文文档