Gulp在前端的常用操作实例

以前在做代码优化的时候，一般都用一些网上的在线工具来完成，写LESS的时候，一般用Koala来编译，感觉用起来也挺不错的。但是现在构建工具的出现，让以前做的那些繁琐操作变的更方便一些了，我在这里也用构建工具来完成一下我以前一些前端的工作。这里我选用了Gulp来使用。

实例概要

代码压缩
CSS自动加前缀
LESS编译
地址版本追加
文件合并
文件修改自动刷新页面

Gulp一些入门知识

这里还是说一下Gulp的一些入门的必备知识，方便看后文的理解。

Gulp是一款自动构建工具，需要在Node.js的环境下运行，常用的API方法并不多，很快就能熟记，用到的大部分功能都是依靠插件来完成的。

Gulp的插件需要用npm来进行安装：

npm install <name> [-g] [--save-dev]

-g全局安装，通常只在项目下安装即可，所以不用加这个参数
--save-dev用于将依赖包保存到项目下的package.json文件中，-dev用来区分开发模式和生产模式下用到的模块。指定则保存到package.json的devDependencies节点，不指定-dev将保存至dependencies节点。

使用Gulp需要先在项目下安装Gulp模块。

初始化项目环境

npm init

进入项目，安装gulp

npm install gulp --save-dev

创建gulp配置文件gulpfile.js

Gulp 官网

实例一：编译LESS

用到插件：gulp-less

安装命令：install gulp-less --save-dev

Github: https: //github.com/plus3network/gulp-less

gulpfile.js代码：

//引入必要文件
var gulp = require('gulp'),
    less = require('gulp-less');

//创建任务
gulp.task('testLess', function(){
    gulp.src('src/less/*.less') //所有src/less下的less文件
        .pipe(less()) //执行less编译
        .pipe(gulp.dest('src/css')) //将编译后的文件写到目的目录下
});

现在在src/less下创建less文件，并编码，然后在CLI下执行：

gulp testLess

即可在src/css下看到已经编译完成的css文件。

实例二：在LESS中加入自动前缀

方法一：gulp-autoprefixer

安装命令：install gulp-autoprefixer --save-dev

Github: https: //github.com/sindresorhus/gulp-autoprefixer

gulpfile.js代码：

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

gulp.task('testLess', function(){
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0']
        })) //自动加入前缀
        .pipe(gulp.dest('src/css'))
});

在CLI下执行：

gulp testLess

编译的文件中已经自动加入了前缀，这对编写CSS能够提高很大的效率。

方法二：less-plugin-autoprefix

这里用的是less的插件。

安装命令：install less-plugin-autoprefix --save-dev

Github: https: //github.com/less/less-plugin-autoprefix

gulpfile.js代码：

var gulp = require('gulp'),
    less = require('gulp-less'),
    LessAutoprefix = require('less-plugin-autoprefix');

gulp.task('testLess', function(){
    gulp.src('src/less/*.less')
        .pipe(less({
            plugins: [
                new LessAutoprefix({ 
                    browsers: ['last 2 versions'] 
                })]
        }))
        .pipe(gulp.dest('src/css'))
});

自动前缀需要自行设置一些编译参数，详细了解可以看官方GitHub，两种方法的配置基本一样。

这个插件可单独应用到为css加前缀。

实例三：在LESS中加入代码压缩

安装命令：install gulp-minify-css --save-dev

Github: https: //github.com/less/less-plugin-autoprefix

这个插件实际上是用的clean-csshttps: //github.com/jakubpawlowicz/clean-css。

gulpfile.js代码：

var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css');

gulp.task('testLess', [], function(){
    gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0']
        }))
        .pipe(gulp.dest('src/css'))
        .pipe(minifycss()); //压缩
});

实例四：为链接文件追加版本号

安装命令：install gulp-rev-append --save-dev

Github: https: //github.com/bustardcelly/gulp-rev-append

为在网页中链接的资源文件路径追加版本号，可以用于防止缓存文件。

版本号是依据文件内容进行MD5后的结果，所以只为文件内容变动，版本号就变动。

工作方式：(?:href|src)="(.*)[\?]rev=(.*)[\"]

var gulp = require('gulp'), 
    rev = require('gulp-rev-append');

gulp.task('testRev', function(){
    gulp.src('src/index.html')
        .pipe(rev())
        .pipe(gulp.dest('src/rev'));
});

要执行这个功能，需要在链接资源地址后加入?rev=@@hash

<!-- inde.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/index.css?rev=@@hash"></script>
</head>
<body>
    <img src="a.jpg?rev=@@hash">
</body>
</html>

<!-- 编译后的文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/index.css?rev=2e151da214ef1a3563abdc2cb8c23d7f">
</head>
<body>
    <img src="a.jpg?rev=d41d8cd98f00b204e9800998ecf8427e">
</body>
</html>

需要注意的是，如果链接的资源并不存在，那么是无法追加版本号的。

实例五：文件合并

安装命令：install gulp-concat --save-dev

Github: https: //github.com/wearefractal/gulp-concat

为了生产模式下，为了减少网络请求，通常将同类文件进行合并，例如合并JS、CSS。

合并JS：

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

gulp.task('concatJs', function(){
    //gulp.src('src/js/*.js')//这种方式合并文件的先后顺序不能控制
    gulp.src(['src/js/js1.js','src/js/js2.js']) //按顺序将文件写入数组，做为参数
    .pipe(concat('all.js')) //合并后生成的文件
    .pipe(gulp.dest('src/css'))
});

合并CSS：

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

gulp.task('concatCss', function(){
    //gulp.src('src/css/*.css')
    gulp.src(['src/css/css1.css','src/css/css2.css'])
    .pipe(concat('all.css')) 
    .pipe(gulp.dest('src/css'))
});

实例六：文件改变自动刷新浏览器

安装命令：install gulp-connect --save-dev

Github: https: //github.com/AveVlad/gulp-connect/

当我们在做页面编码时，为了实时查看代码效果，需要不断的刷新浏览器，十分繁琐。那有没有什么工具可以监控文件，只要文件发生变化就及时自动刷新浏览器的？当然有了，这下我们就可以释放F5了。


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

//创建服务任务
gulp.task('connect', function(){
    connect.server({
        //这里有配置端口和主机的选项，我这里就按默认的来了
        livereload: true //即时刷新
    });
});

gulp.task('css', function(){
    gulp.src('src/css/*.css')
        .pipe(connect.reload()); //重新加载
});

//css文件监测
gulp.task('fileWatch', function(){
    gulp.watch('src/**/*.css', ['css']);
});

//默认任务启动
gulp.task('default', [ 'connect','fileWatch']); //先打开连接，再监测文件

这里直接运行gulp即可，因为没有配置端口，所以根据CLI中的提示，在浏览器中打开地址即可。此命令不直接打开浏览器。

当在修改CSS文件并保存后，浏览器就会自动刷新了。

LiveReload是一个WebSockets协议：

结语

好了，在Gulp中常用的前端操作基本都写了，大家可以根据自己的需求去定制。想进行更详细的配置，可以参考每个插件中的GitHub地址。

博客名称：王乐平技术博客

CSDN博客地址：http://blog.csdn.net/lecepin