gulp实用教程（三）常用插件

作者：

2015-11-23 15:11:20

116

gulp插件

gulp提供了一些很实用的接口，但本身并不能做太多的事情。可以读取文件、写入文件以及监控文件等一少部分功能。其它实用的功能都是依靠插件来进行扩展的。这些插件可以实现比如

编译 Sass：gulp-sass
编译 Less：gulp-less
合并文件：gulp-concat
压缩js 文件：gulp-uglify
重命名js文件：gulp-rename
优化图像大小：gulp-imagemin
压缩css 文件：gulp-minify-css
创建本地服务器：gulp-connect
实时预览 gulp-connect

插件列表

gulp插件

使用插件

npm install xxx --save-dev 安装插件
在 gulpfile.js 顶部引入此插件
在创建任务的时候使用此插件

gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的:

"devDependencies": {
   "gulp": "^3.9.0",
   "gulp-concat": "^2.6.0",
   "gulp-connect": "^2.2.0",
   "gulp-imagemin": "^2.3.0",
 }

然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件：

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var $ = require('gulp-load-plugins')();

然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用$.concat和$.connect来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。

安装插件

npm install gulp-sass --save-dev

安装后可以在node-modules里看到此插件也可以在package.json的devDependencies里面看到此插件的配置 "gulp-sass": "^2.0.4"

插件任务

可以在app/sass下面创建文件base.scss,然后就可以把此文件编译到dist下面

使用插件

想要使用 Gulp 去把 Sass 编译成 CSS ，我们可以使用 gulp sass 这个插件。先在我们的项目里去安装一下这个插件，打开命令行工具，进入到项目所在的目录。然后输入 npm install gulp-sass. 可以把这个 gulp-sass 放到项目的开发依赖里面，加上一个 --save-dev ..

sudo npm install gulp-sass --save-dev

完成以后，回到项目的node_modules 这里，你会看到刚才安装的 gulp-sass 插件另外，在项目的 package.json 这个文件里面， devDependencies 这里，也会有这个 "gulp-sass": "^2.0.4"

在项目里面，app/sass 这个目录的下面，有一个 sass 文件，就是这个 base.scss 下面，我们可以使用 gulp-sass 这个插件，把这个目录里面的 sass 文件编译成 css ，再放到 dist 目录下面的 css 这个目录的下面。

打开 gulpfile.js 在这个文件里面，我们首先要把 gulp-sass 这个插件包含进来 var sass = require('gulp-sass') 这样我们就可以使用 sass 这个方法去处理文件了 ...

在下面，再去创建一个任务gulp.task 这个任务可以叫它 sass 再用一个匿名函数 return gulp.src 先去指定要处理的文件这里就是 app/sass 这个目录里面的所有的 scss 类型的文件注意这里我用了一个 **/ 它会包含目录下面的所有级别的子目录

接着用一个 pipe 在这个管道里，我们可以使用 sass 插件去处理读取进来的文件这里输入 sass() 这个名字是我们在上面包含 gulp-sass 这个插件的时候起的如果你用的是其它的名字，在这里，你也需要修改成对应的名字

再用一个 pipe ，我们去输出处理好的文件也就是编译好的 sass 这里使用 gulp 的 dest 方法在这个方法里指定一下存储这些处理好的文件的路径放到 dist 目录下面的 css 这个目录里面。

执行

保存打开命令行工具去执行一下这个任务输入 gulp sass 回车完成以后再回到项目打开 dist 下面的 css 这个目录在这里，你会看到编译好的 sass,就是这个 style.css

代码如下

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass',function(){
    return gulp.src('app/sass/*.scss').pipe(sass()).pipe(gulp.dest('dist/css'));
});

gulp.task('default',['sass']);

安装插件

npm install gulp-less --save-dev

安装后可以在node-modules里看到此插件也可以在package.json的devDependencies里面看到此插件的配置

创建less

可以在app/less下面创建文件page.less,然后就可以把此文件编译到dist下面

编写任务

再打开 gulpfile.js 先把 gulp-less 这个插件包含进来把 Less 编译成 CSS 跟把 Sass 编译成 css 这个任务是差不多的，只不过我们需要使用不同的插件先改一下任务的名字,sass 换成 less 要读取进来的文件是 app/less 目录下面的所有的 less 文件*.scss 改成 *.less 然后用 gulp-less 这个插件去处理这些文件 sass 换成 less 保存回到命令行执行一下 less 这个任务输入 gulp less 成功以后，回到项目打开 dist/css 这个目录在这里你可以找到编译好的 less page.css

代码如下

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less',function(){
    return gulp.src('app/less/*.less').pipe(less()).pipe(gulp.dest('dist/css'));
});

gulp.task('default',['less']);

gulp-connect

有些时候我们需要把文件放到本地服务器上去预览，gulp-connect可以帮我们创建一个本地服务器去运行我们的项目

安装插件

 npm install gulp-connect --save-dev

加上一个 --save-dev，把这个插件放到开发依赖里面。

创建任务

打开 gulpfile.js 先在文件的顶部这里去包含一下这个 gulp-connect 插件给它起个名字connect ... var connect = require('gulp-connect');

运行任务

下面，我们可以去创建一个本地服务器，去运行项目的 dist 目录下面的静态文件先创建一个任务用 gulp 的 task 这个任务叫它 server 再用一个匿名函数在这个函数里面可以使用 connect 的 server 这个方法去创建这个服务器

gulp.task('server', function () {
connect.server();
});

在这个方法里面，可以去做一些设置，比如服务器的主机名，端口号，服务器的根目录等等给它一个对象,然后设置一下 root 这个选项 ,它的值就是服务器的根目录,这里我们设置成 dist 这个目录 connect.server({root: 'dist'});

观察结果

保存打开命令行工具去执行一下这个任务输入 gulp server 这里会提示 Server started http://localhost:8080 这个 localhost:8080 就是服务器的地址默认的端口号是 8080 ，你也可以通过 port 这个选项自己去指定这个端口号下面可以打开一个浏览器输入 localhost:8080 回车这里显示的就是服务器根目录下面的 dist 目录下面的静态文件

代码如下

var gulp = require('gulp');
var less = require('gulp-less');
var connect = require('gulp-connect');

gulp.task('server',function(){
   connect.server({
       root:'dist',//服务器的根目录
       port:8080 //服务器的地址，没有此配置项默认也是 8080
   });
});
//运行此任务的时候会在8080上启动服务器，
gulp.task('default',['server']);

gulp-connect

我们希望当文件变化的时候浏览器可以自动刷新，这样我们就不需要文件修改后手动去刷新浏览器了

配置

启用实时刷新

在server配置中增加livereload启用实时刷新的功能

connect.server({root: 'dist', livereload: true});

配置哪些文件变化时去自动刷新浏览器

.pipe(connect.reload());

比如我们想让浏览器在 index.html 这个文件发生变化以后，去刷新一下在这个 copy-index 任务里面，把文件复制到目的地以后，再执行一下刷新后面加上一个 .pipe 管道 .. 这个管道干的事就是去刷新浏览器 ... 可以使用 connect 的 reload 这个方法

gulp.task('copy-html',function(){
     gulp.src('app/index.html')
         .pipe(gulp.dest('dist'))
         .pipe(connect.reload());
});

因为在下面的 watch 这个任务里面，我们已经监视了 index.html 这个文件的变化，一旦发生变化，就去执行 copy-index 这个任务，这个任务现在要做的事就是去把 index.html 复制到 dist 这个目录的下面，然后再刷新一下浏览器 .

最后我们可以再去创建一个默认的任务输入 gulp.task 任务的名字是 default 这个任务依赖 server 还有 watch 这两个任务

gulp.task('default', ['server', 'watch']);

运行任务

保存打开命令行工具先停止一下服务器 ctrl + C 然后再执行 gulp 这样会起动服务器，并且开始监视文件的变化 ..

观察结果

打开浏览器，刷新一下再回到项目打开根目录下面的 index.html 这里我们可以修改一下这个文件然后保存一下你会发现，在浏览器上，会实时的显示出文件的变化

代码如下

var gulp = require('gulp');
var connect = require('gulp-connect');

gulp.task('copy-html',function(){
     gulp.src('app/index.html')
         .pipe(gulp.dest('dist'))
         .pipe(connect.reload());
});

gulp.task('watch',function(){
    gulp.watch('app/index.html',['copy-html']);
});

gulp.task('server',function(){
    connect.server({
        root:'dist',//服务器的根目录
        port:8080, //服务器的地址，没有此配置项默认也是 8080
        livereload:true//启用实时刷新的功能
    });
});
//运行此任务的时候会在8080上启动服务器，
gulp.task('default',['server','watch']);

gulp-concat

可以把几个文件合并到一块

安装

npm install gulp-concat --save-dev

配置

再回到我们的项目 app/css下有index.css, js下有 index.js page.js inex.tmp.js
我们可以使用 gulp-concat 这个插件，把index.js和page.js这两个js文件合并到一块儿，
然后放到 dist 目录下面的 js 这个目录的里面。

打开 gulpfile.js
先在文件的顶部，把 gulp-concat 这个插件包含进来
var concat = require('gulp-concat');

然后再创建一个任务
用 gulp 的 task 方法
任务的名字可以叫它 copy-other
再用一个匿名函数去设计一下这个任务要干的事儿
先用 gulp 的 src 方法，去读取要处理的文件
这里我们找出 js 目录下面的两个 js 文件

先给这个方法一个数组
然后提定一下app/js下面的文件的位置逗号分隔一下
再排除掉 tmp.js结尾的文件再用一个 .pipe 管道
在这个管道里面，可以使用 concat 去把读取过来的文件合并到一块儿
在这个 concat 里面，可以指定一下合并以后，这个文件的名字
我们叫它all.js
接着再用一个 .pipe 去把合并好的文件放到一个指定的位置上
用 gulp 的 dest 放在 dist 目录下面的 js 这个目录里面。

gulp.task('concat',function(){  
    return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])  
        .pipe(concat('app.js'))  
        .pipe(gulp.dest('dist/js'));  
});

运行任务

保存
找到命令行工具
去执行一下这个任务
输入 gulp scripts
完成以后，再回到项目
打开 dist
js 这个目录，这个目录下面的 all.js 就是合并好的文件

代码如下

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify')

gulp.task('uglify',function(){
    return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

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

gulp-concat

合并后我们可以对JS文件进行合并，最小化处理完成这个任务可以使用 gulp-uglify

安装

先打开命令行工具

npm install gulp-uglify --save-dev

配置

完成以后回到项目先在文件的顶部去包含这个插件起个名字叫做 uglify

var uglify = require('gulp-uglify');

面我们用这个插件提供的功能去压缩一下合并之后的这个 js 文件这里我们可以直接在这个 uglify 任务里面，在concat 之后，加上一个 .pipe 管道在这个管道里面，使用 uglify 去压缩一下传过来的文件

gulp.task('uglify',function(){
    return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

运行任务

保存回到命令行工具去执行一下这个 uglify 任务输入 gulp uglify 完成以后，再回到项目打开 dist/js/all.js 你会发现这个文件就是经过最小化处理之后的 js 文件

代码如下

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify')

gulp.task('uglify',function(){
    return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

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

html文件压缩

gulp-minify-html插件用来压缩html文件。

代码如下

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

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

gulp-concat

在把处理好的文件存放到指定的位置之前，我们可以先去重新命名一下它。可以使用 gulp-rename 这个插件.

安装

npm install gulp-rename --save-dev

配置

然后回到项目,打开 gulpfile.js,在文件的顶部，去包含一下这个插件,可以叫它 rename. var rename = require('gulp-rename');

在这个 uglify 任务里面，我们先把 js 文件使用 concat 插件合并到了一块，又用 uglify 压缩了一下，最后再输出到 dist 下面的 js 这个目录里面。

这里我们可以让 uglify 这个任务，在合并文件以后，输出合并之后的文件，然后再压缩一下，再用 gulp-rename 插件去重命名一下压缩以后的文件，再把压缩之后的文件输出到 dist 下面的 js 目录里面。

gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
        .pipe(concat('app.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify())
        .pipe(rename('app.min.js'))
        .pipe(gulp.dest('dist/js'));

运行任务

保存回到命令行工具再去执行一下 uglify 这个任务输入 gulp uglify 完成以后，回到项目打开 dist/js 你会发现这个目录的下面有两个 js 文件 all.js 是合并以后的 js 文件 all.min.js 是合并，压缩，然后重命名的 js 文件。

代码如下

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('uglify',function(){
    return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
        .pipe(concat('app.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify())
        .pipe(rename('app.min.js'))
        .pipe(gulp.dest('dist/js'));
});

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

ggulp-imagemin

如果要想在保证不改变图像质量的情况下，让图像文件的体积变得更小一点,我们可以使用 gulp-imagemin

安装

sudo npm install gulp-imagemin --save-dev

配置

完成以后，回到项目
打开 gulpfile.js
先在文件顶部去包含这个插件，可以叫它 imagemin

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

之前我们创建过一个叫 copy-imgs 的任务
在这个任务里面，我们可以使用这个插件去优化一下图像的尺寸
添加一个 .pipe，在这个管道里边，使用 imagamin()

   gulp.task('copy-imgs',function(){  
       return gulp.src('app/imgs/**/*.{jpg,png}')  
           .pipe(imagemin())  
           .pipe(gulp.dest('dist'));  
   });

这个插件还有很多配置的选项，你可以参考项目的页面 gulp-imagemin
这里我们先用插件默认的选项
保存
再去执行一下这个任务
打开命令行
输入
gulp copy-images
回车

这里会显示出
imagemin 优化的图像的数量
还有节省的空间跟比例是多少
imagemin 给我的项目优化了 6 个图像文件，节省了 169KB 的空间
节省的空间占所有图像文件尺寸的 11.3%

代码如下

var gulp = require('gulp');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');

gulp.task('copy-images',function(){
    return gulp.src('app/imgs/**/*.{jpg,png}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist'));
});

gulp.task('default',['copy-images']);

使用gulp-jshint插件，用来检查js代码。

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

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

代码如下

学习建议

多了解插件库，利用最合适的插件。
常用的插件，仔细阅读文档以便正好使用。
学习好自身的API
尝试编写适合自己工作流程中和习惯的plugin

gulp实用教程（二）基础

gulp实用教程（四）项目实战