自动化构建工具gulp入门（二）

上一篇文章中和大家分享了gulp的一些基本概念和使用方法，但实际开发中gulp需要依赖其丰富的插件来发挥它的能力。

gulp官网中为我们提供了丰富的插件系统可以协助我们进行各种开发工作。但由于其插件数量实在太多，多达数千个，所以我们不可能系统的学习每个插件。在此跟大家一起分享一些常用插件的使用，如果你有更多的学习或开发使用诉求，可以访问gulp的插件官网学习更多插件的使用。

插件官网：http://gulpjs.com/plugins/

gulp-sass

开发环境下书写 sass 或 less代码，函数式的书写自己的样式是一种很好的开发体验，但我们最终仍需将sass或less编译转化为css文件引入。gulp-sass可以帮助我们完成这部分的工作。

npm install gulp-sass

插件安装后在gulpfile中引入即可使用。

let sass = require("gulp-sass");

gulp.task("compile:sass",()=>{
      return gulp.src("sass/**/*.scss").pipe(sass()).pipe(gulp.dest("dist/css"));
});

gulp.task("default",["compile:sass"])

如果你要编译的是less文件只需把插件换成 gulp-less，用法相同。

gulp-connect

现如今我们的web开发一般都会采用前后端分离的形式，这样可以解放前端，大大提高开发效率。当然，这也意味着前端要给自己起个服务。gulp-connect 就是这样一个专门为我们提供前端服务的插件。

npm install gulp-connect

启动一个简单服务：

 let connect = require("gulp-connect");
 gulp.task("server",()=>{
        connect.server({
           root:"dist",  // 服务器根目录 
           port:"8080"   // 服务端口
     })
});
gulp.task("default",["server"])

服务默认展示目标根目录下的index.html 文件。打开浏览器，访问 localhost:8080 可以看到index.html中的内容。

热重载

在开发时人们总是希望修改代码后就能看到页面样式变化，而不是每次都去手动刷新浏览器。热重载可以彻底解决人们这一困扰。利用gulp-connect 结合我们之前介绍的复制和监听可以实现这一效果。

let gulp = require("gulp");
let connect = require("gulp-connect");
gulp.task("copy:index",()=>{
    return gulp.src("index.html").pipe(gulp.dest("dist")).pipe(connect.reload());
});
gulp.task('watch',function(){
    gulp.watch('index.html',['copy:index']);
    gulp.watch('images/**/*',['copy:images']);
    gulp.watch(['json/*.json','xml/*.xml','!json/secret.json'],['merge']);
});
gulp.task("server",()=>{
     connect.server({
         root:"dist",
         port:"8080",
         livereload:true
     })
});
gulp.task("default",["server","watch"]);

打开浏览器，访问 localhost:8080 即可看到index.html内容，修改index.html， ctrl+s 保存可以看到浏览器显示内容为修改后的。

gulp-concat

npm install gulp-concat

用于合并文件，最常用于合并js、css等文件。

let connect = require("gulp-connect");

gulp.task("concat",()=>{
      return gulp.src(["script/a.js","script/b.js"]).pipe(concat("vendor.js")).pipe(gulp.dest("dist/js"));
})

gulp.task("default",["concat"]);

执行命令gulp, 可以看到 script 下 a.js和 b.js的内容都将被合并到dist/js下的vendor.js中。项目上线之前为了优化加载速度，我们一般会进行这样的合并和代码压缩工作。

gulp-uglify

npm install gulp-uglify

用于代码压缩，压缩后的效果是代码在一行展示

let uglify = require("gulp-uglify");

gulp.task("uglify",()=>{
    return gulp.src("script/a.js").pipe(uglify()).pipe(gulp.dest("dist/minjs"));
});

gulp.task("default",["uglify"]);

gulp-minify-css

npm install gulp-minify-css

用于压缩css，和gulp-uglify 有点像，压缩后都是在一行显示。

let minify = require("gulp-minify-css");

gulp.task("style",()=>{
     return gulp.src("sass/**/*.scss").pipe(sass()).pipe(minify()).pipe(gulp.dest("dist/css"));

gulp.task("default",["style"]);
})

gulp-rename

npm install gulp-rename

文件的重命名插件，支持string,function,object三种类型的输入.在这里我们只示例string类型的输入，更多方式的使用你可以在插件官网看的示范。

let rename = require("gulp-rename");

gulp.task("rename",()=>{
    return gulp.src("readme.txt").pipe(rename("readme.md")).pipe(gulp.dest("dist"));
})

gulp-clean

npm install gulp-clean

删除文件

let clean = require("gulp-clean");

gulp.task("clean",()=>{
    return gulp.src("readme.txt").pipe(clean())
})

gulp-filter

npm install gulp-filter

文件过滤，筛选

let filter = require("gulp-filter");

gulp.task("filter",()=>{
    return gulp.src("script/**/*.js").pipe(filter(["script/**/*.js","!script/vendor.js"])).pipe(uglify()).pipe(gulp.dest("dist/js"));
});

gulp-csso

npm install gulp-csso

css 优化压缩,感觉和gulp-minify-css差不多效果

let csso = require("gulp-csso");

gulp.task("csso",()=>{
   return gulp.src("sass/**/*.scss").pipe(sass()).pipe(csso()).pipe(gulp.dest("dist/css"));
});

gulp-html-minify

npm install gulp-html-minify

html 文件内容压缩, 也是压缩在一行显示

let htmlMinify = require("gulp-html-minify");

gulp.task("htmlMinify",()=>{
    return gulp.src("index.html").pipe(htmlMinify()).pipe(gulp.dest("dist"));
});

gulp-imagemin

npm install gulp-imagemin

压缩图片资源大小

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

gulp.task("imagemin",()=>{
    return gulp.src("images/**/*{jpg,png}").pipe(imagemin()).pipe(gulp.dest("dist/images"));
})

gulp-zip

npm install gulp-zip

压缩文件为zip包

let zip = require("gulp-zip");

 gulp.task("zip",()=>{
    return gulp.src("node_modules/*").pipe(zip("modules.zip")).pipe(gulp.dest("dist"));
});

gulp-babel

npm install gulp-babel babel-core babel-preset-env

es6 转 es5

let babel = require("gulp-babel");

gulp.task("babel",()=>{
    return gulp.src("script/**/*.js").pipe(babel({
        presets: ['env']
    })).pipe(gulp.dest("dist/js"));
});

由于gulp插件实在太多，且各种配置方式不一，如果大家需要在项目中实际应用还需要在官网更多的了解插件功能和调用方式。

自动化构建工具gulp入门（二）

猜你喜欢