Gulp 常用插件及其使用

gulp 的插件数量虽然没有 grunt 那么多，但也可以说是应有尽有了，下面列举一些常用的插件。

重命名

使用 gulp-rename 安装：npm install --save-dev gulp-rename 用来重命名文件流中的文件。用 gulp.dest() 方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用 gulp-rename 插件来改变文件流中的文件名。

var gulp = require("gulp"),
  rename = require("gulp-rename"),
  uglify = require("gulp-uglify");

gulp.task("rename", function () {
  gulp
    .src("js/jquery.js")
    .pipe(uglify()) // 压缩
    .pipe(rename("jquery.min.js")) // 会将 jquery.js 重命名为 jquery.min.js
    .pipe(gulp.dest("js"));
  // 关于 gulp-rename 的更多强大的用法请参考 https://www.npmjs.com/package/gulp-rename
});

js 文件压缩

使用 gulp-uglify 安装：npm install --save-dev gulp-uglify 用来压缩 js 文件，使用的是 uglify 引擎

var gulp = require("gulp"),
  uglify = require("gulp-uglify");

gulp.task("minify-js", function () {
  gulp
    .src("js/*.js") // 要压缩的 js 文件
    .pipe(uglify()) // 使用 uglify 进行压缩，更多配置请参考：
    .pipe(gulp.dest("dist/js")); // 压缩后的路径
});

css 文件压缩

使用 gulp-minify-css（也可以使用 gulp-cssnano) 安装：npm install --save-dev gulp-minify-css 要压缩 css 文件时可以使用该插件

var gulp = require("gulp"),
  minifyCss = require("gulp-minify-css");

gulp.task("minify-css", function () {
  gulp
    .src("css/*.css") // 要压缩的 css 文件
    .pipe(minifyCss()) // 压缩 css
    .pipe(gulp.dest("dist/css"));
});

html 文件压缩

使用 gulp-minify-html 安装：npm install --save-dev gulp-minify-html 用来压缩 html 文件

var gulp = require("gulp"),
  minifyHtml = require("gulp-minify-html");

gulp.task("minify-html", function () {
  gulp
    .src("html/*.html") // 要压缩的 html 文件
    .pipe(minifyHtml()) // 压缩
    .pipe(gulp.dest("dist/html"));
});

js 代码检查

使用 gulp-jshint 安装：npm install --save-dev gulp-jshint 用来检查 js 代码

var gulp = require("gulp"),
  jshint = require("gulp-jshint");

gulp.task("jsLint", function () {
  gulp.src("js/*.js").pipe(jshint()).pipe(jshint.reporter()); // 输出检查结果
});

文件合并

使用 gulp-concat 安装：npm install --save-dev gulp-concat 用来把多个文件合并为一个文件，我们可以用它来合并 js 或 css 文件等，这样就能减少页面的 http 请求数了

var gulp = require("gulp"),
  concat = require("gulp-concat");

gulp.task("concat", function () {
  gulp
    .src("js/*.js") // 要合并的文件
    .pipe(concat("all.js")) // 合并匹配到的 js 文件并命名为 "all.js"
    .pipe(gulp.dest("dist/js"));
});

less 和 sass 的编译

less 使用 gulp-less

安装：npm install --save-dev gulp-less

var gulp = require("gulp"),
  less = require("gulp-less");

gulp.task("compile-less", function () {
  gulp.src("less/*.less").pipe(less()).pipe(gulp.dest("dist/css"));
});

sass 使用 gulp-sass

安装：npm install --save-dev gulp-sass

var gulp = require("gulp"),
  sass = require("gulp-sass");

gulp.task("compile-sass", function () {
  gulp.src("sass/*.sass").pipe(sass()).pipe(gulp.dest("dist/css"));
});

图片压缩

可以使用 gulp-imagemin 插件来压缩 jpg、png、gif 等图片。

安装：npm install --save-dev gulp-imagemin

var gulp = require("gulp");
var imagemin = require("gulp-imagemin");

gulp.task("default", function () {
  return gulp.src("src/images/*").pipe(imagemin()).pipe(gulp.dest("dist"));
});

gulp-imagemin 的使用比较复杂一点，而且它本身也有很多插件，建议去它的项目主页看看文档

自动刷新

使用 gulp-livereload 插件

安装：npm install --save-dev gulp-livereload。

当代码变化时，它可以帮我们自动刷新页面

该插件最好配合谷歌浏览器来使用，且要安装 livereload chrome extension 扩展插件，不能下载的请自行 FQ。

var gulp = require("gulp"),
  less = require("gulp-less"),
  livereload = require("gulp-livereload");

gulp.task("less", function () {
  gulp.src("less/*.less").pipe(less()).pipe(gulp.dest("css")).pipe(livereload());
});

gulp.task("watch", function () {
  livereload.listen(); // 要在这里调用 listen() 方法
  gulp.watch("less/*.less", ["less"]);
});

sourcemaps/css 自动前缀

安装：npm install --save-dev gulp-sourcemaps

安装：npm install --save-dev gulp-autoprefixer

var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

...
gulp.task('demo', function() {
    var css = [...];
    gulp.src(css)
        .pipe(sourcemaps.init())
        .pipe(concat("styles.css"))
        .pipe(cssnano())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./www/build'));
});

base64

安装：npm install --save-dev gulp-base64

var base64 = require("gulp-base64");

gulp.task("style", function () {
  var css = [
    "./www/libs/am-touch/amazeui.touch.css",
    "./www/css/main.css",
    "./www/css/page.main.css",
    "./www/css/checks.css",
    "./www/css/fullPageLoading.css",
    "./www/css/loading.css",
  ];
  return gulp
    .src(css)
    .pipe(concat("styles.css"))
    .pipe(autoprefixer())
    .pipe(
      base64({
        baseDir: "./www/css",
        extensions: ["png"],
        maxImageSize: 20 * 1024, // bytes
        debug: false,
      })
    )
    .pipe(cssnano())
    .pipe(gulp.dest("./www/build"));
});

clean

安装：npm install --save-dev gulp-clean

var clean = require("gulp-clean");
gulp.task("clean", function () {
  return gulp.src(["./www/build/*"]).pipe(
    clean({
      force: true,
    })
  );
});

plumber

安装：npm install --save-dev gulp-plumber

错误捕获，防止出错后中断 gulp

var clean = require("gulp-clean");
gulp.task("clean", function () {
  return gulp.src(["./www/build/*"]).pipe(
    clean({
      force: true,
    })
  );
});

在 gulp 中使用 webpack-stream

webpack 非常强大，但是也有不足的地方，批量式处理依然是 gulp 更胜一筹。我们是否可以将两者的优点结合起来呢？ 这篇文章就是讲述如何集成 gulp 和 webpack

安装 webpack-stream

很重要的插件，当然也可以直接使用官方的 webpack, 集成方式可以看 webpack 官网。但 webpack-stream 更符合 gulp 的流语法。

sudo npm install --save webpack-stream vinyl-named

windows 用户去掉 sudo, vinyl-named 用来保持输入和输出的文件名相同，否则会自动生成一个 hash.

配置文件的编写：

// gulpfile.js
var gulp = require("gulp");
var webpack = require("webpack-stream");
var named = require("vinyl-named");
var webpackConfig = require("./webpack.config.js");

gulp.task("webpack", function () {
  return gulp.src("./www/src/main.jsx").pipe(named()).pipe(webpack(webpackConfig)).pipe(gulp.dest("./www/build/"));
});

注意：用 webpack-stream 不需要配置 entry 和 output

// webpack.config.js
module.exports = {
  watch: true,
  devtool: "source-map",
  resolve: {
    extensions: ["", ".js", ".jsx"],
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        loader: "babel-loader",
        query: {
          presets: ["es2015", "react"],
        },
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        query: {
          presets: ["es2015"],
        },
      },
    ],
  },
};