通常一个前端构建流程包括:

  • 文件清理: gulp-clear
  • 文件拷贝: gulp-copy
  • 文件转换: gulp-webpack
  • 文件合并: gulp-concat
  • 文件压缩: gulp-minify
  • 文件服务: gulp-connect
  • 文件监控: gulp-watch
  • css 相关:
    • less, sass 转换(gulp-less, gulp-sass)
    • css 自动添加前缀(gulp-autoprefixer)
  • js 相关:
    • jslint(gulp-jshint)
  • html 转换
    • html 模板(gulp-jade, gulp-ejs)
    • html prettify
    • html validator
    • html min

Gulp 通过定义gulpfile.js配置文件的方式定义流程, gulp.js 会通过调用 Node.js 来执行流程.

引入插件

var gulp = require("gulp"), ...
`</pre>

### 设定路径

<pre>`var paths = {
  styles:{
    src: "src/styles/**/*.less",
    dest: "assets/styles/"
  },
  scripts:{
    src: "src/scripts/**/*.js",
    dest: "assets/scripts/"
  }
};
`</pre>

### 设定任务

<pre>`gulp.task("taskName", function(){
  gulp.src(paths.styles.src)
      .pipe(task())
      .pipe(gulp.dest(paths.styles.dest));
});
`</pre>

一个 gulpfile.js 文件只是一个 Node 程序, 在 gulpfile 中可以使用任何 npm 中的模块或者其他 Node.js
并非所有的任务都是基于流, 例如删除文件

<pre>`function clean(){
  //del 也可以和 gulp.src 一样基于模式匹配的文件路径定义方式
  return del(["assets"]);
}
`</pre>

如果要控制 task 顺序, 可以通过回调函数实现
gulp.task(taskName, function(fn){})
现在新增加了串行和并行 API
- gulp.parallel: 并行执行
- gulp.series: 串行执行
e.g.

<pre>`gulp.task("one", function(done){
  //do stuff
  done(); //回调函数
})
gulp.task("two", function(done){
  //do stuff
  done();
});
//并行执行任务, 执行完后可以添加回调函数
gulp.task("parallelTask", gulp.parallel("one", "two", function(done){
  done();
}));
//串行任务
gulp.task("seriesTask", gulp.series("one", "two", function(done){
  done();
}));
`</pre>

### 前端常用插件

  • gulp-sass: 编译 SASS

  • browser-sync: 保持多浏览器, 多设备同步

  • gulp-imagemin: 压制 png/jpg/git/svg 图片

  • gulp-minify-css: 压缩 CSS

  • gulp-rename

  • gulp-concat: 合并 JS

  • gulp-uglify: 压缩 JS

  • gulp-autoprefixer: 添加前缀

  • gulp-css-spriter: 生成雪碧图

  • gulp-htmlmin

  • gulp-server-livereload

    拥有 live-reloading 的服务器

    使用 BrowserSync 和 gulp, 你可以轻松创建一个开发服务器, 然后同一个 WiFi 中的任何设备都可以方便访问.
    BrowserSync 同时集成了 live-reload, 所以不需要做另外的配置.

    首先安装模块
    npm install brower-sync --save-dev
    假设目前目录结构为

    `gulpfile.js
app/
    styles/
            main.css
        scripts/
            main.js
        index.html
`

    配置 gulpfile.js, 将 app 目录中的文件加入到服务器中, 并且所有的浏览器会在文件发生变化后自动刷新

    `var gulp = requrie("gulp");
var browserSync = require("browser-sync").create();
var reload = browerSync.reload;

//监视文件改动并重新载入
gulp.task("browser-sync", function(){
    browserSync.init({
            server:{
                    baseDir: 'app'
                }
        });

        gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, browserSync.reload);
});
`

    CSS 预处理

    指定浏览器无需刷新即可重载 CSS
    假设目录如上

    `var gulp = require("gulp");
var sass = require("gulp-ruby-sass");
var browserSync = require("browser-sync").create();

gulp.task("sass", function(){
    return sass("styles/**/*.scss")
                 .pipe(gulp.dest("app/css")
                         .pipe(reload({stream:true}));
{);
/*
gulp.task("sass", function(){
    gulp.src("styles/**/*.scss")
        .pipe(sass({outputstyle: 'compressed'}).on('error',sass.logError))
        .pipe(gulp.dest("app/css");
});
*/
gulp.task("browser-sync", ["sass"], function(){
    browserSync({
            server: {
                    baseDir: "app";
                }
        });
        gulp.watch("app/styles/**/*.scss", ["sass"], browserSync.reload);
});

设置tunnel: true 来使用一个公开的 URL 来访问本地站点