gulp 插件之less编译/rev-append版本号

发表于   |   分类于   |     |   阅读次数

考虑到项目近期的需要，提前学习了一下 gulp 插件之 less编译、rev-append添加版本号，自然是边学边弄个小项目来实践的啦！

cnpm 淘宝 NPM 镜像

以前一直是通过 npm 来安装插件的，此做法是直接从国外服务器下载插件的，受网络影响大。于是，淘宝便搞了个 cnpm ：

“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

详细说明移步官网：
淘宝镜像官网：淘宝 NPM 镜像

安装 cnpm： $ npm install -g cnpm --registry=https://registry.npm.taobao.org；
安装完成后，查看版本号：cnpm -v；
使用 cnpm 前，先关闭命令行提示符再重新打开使用；安装完直接使用有可能出现异常。
cnpm 与 npm 完全一致，只是在执行命令时将 npm 改为 cnpm 而已。

初始化准备 目录结构

新建目录 gulp_revLess ，并在该目录下局部安装gulp：

1
cnpm install gulp --save-dev

安装后，目录中出现一个目录 node_modules、一个文件package.json。

安装插件：

1
cnpm install gulp-less gulp-minify-css gulp-jshint jshint gulp-uglify gulp-rev-append --save-dev

安装后，目录 node_modules下出现了各种插件的对应目录。
这里主要用到的插件功能：less编译成css，css压缩，js代码检查，js压缩，css/js的版本号控制。

再在目录 gulp_revLess下新建目录dev（开发目录）、dist（gulp压缩后目录）；新建文件gulpfile.js;
然后在目录dev、dist新建各种代码文件，完成后的目录 gulp_revLess结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|-gulp_revLess
    |-dev
        |-css
            index.css
            index.less
            index1.css
            index1.less
        |-js
            index.js
        index.html
    |-dist
        |-css
        |-js
        |-jsapp
            jquery-1.11.3.min.js
    |-node_modules
    gulpfile.js
    package.json

说明：目录dev里面是开发环境的原始代码；目录dist里面是经过 gulp 处理后的正式环境代码；但：目录jsapp下的是引用的js类库（如jquery）,这些不作压缩处理（会报很多错）。

编写 dev 目录下的代码

在 dev 目录下，分别编写2个css、1个js、1个html文件，其中index.html中对css/js的引用路径进行后缀处理：?rev=@@hash
初始化的 index.html 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />            
    <title>gulp的less rev</title>
    <link href="../dist/css/index.css?rev=@@hash" rel="stylesheet" type="text/css" />
    <link href="../dist/css/index1.css?rev=@@hash" rel="stylesheet" type="text/css" />
    <script src="../dist/jsapp/jquery-1.11.3.min.js"></script>
    <script src="js/index.js?rev=@@hash"></script>
</head>
<body>
    <h4 class="txt">测试：修改index.css背景色，less编译/css压缩/版本号</h4>
    <div class="cont">测试：修改index1.css背景色，less编译/css压缩/版本号</div>
    <p><a class="link" href="javascript:void(0);">测试点击JS：修改index.js，压缩/检查/版本号/</a></p>
</body>
</html>

编辑配置文件gulpfile.js

打开gulpfile.js文件进行配置编辑，直接上代码，里面附有详细注释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//引入组件
var gulp = require('gulp'),
    less = require('gulp-less'),
    cssmin = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    rev = require('gulp-rev-append');
//less任务：编译压缩
gulp.task('less',function(){
    var lessSrc = './dev/css/*.less',
        lessDst = './dist/css';
    return gulp.src(lessSrc)
        .pipe(less())
        .pipe(cssmin())
        .pipe(gulp.dest(lessDst));
});
//js任务
gulp.task('js',function () {
    var jsSrc = './dev/js/*.js',
        jsDst ='./dist/js';
    return gulp.src(jsSrc)
        .pipe(jshint())
        .pipe(jshint.reporter())
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});
//版本号
gulp.task('rev',function(){
    return gulp.src('./dev/index.html')
        .pipe(rev())
        .pipe(gulp.dest('./dev'));
});
//watch
gulp.task('watch',function(){
    //less,rev
    gulp.watch('./dev/css/*.less', ['less','rev']);
    //js,rev
    gulp.watch('./dev/js/*.js', ['js','rev']);
});
// 默认预设任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default',function(){
    gulp.start('less','js','rev','watch');
});

测试gulp

目前，目录dist下的css/js均为空。
现在，在目录gulp_revLess下执行 gulp 命令，成功后，目录dist下的css/js里面已经有了被gulp处理过的css样式/js脚本文件了；而且，此时的index.html中的路径变成了这样：

1
2
3
4
<link href="../dist/css/index.css?rev=0ebfeb67a96a6e293ec7fe7cb9b3a688" rel="stylesheet" type="text/css" />
<link href="../dist/css/index1.css?rev=524cb4d30691bea8e7004eb79d01d6f0" rel="stylesheet" type="text/css" />
<script src="../dist/jsapp/jquery-1.11.3.min.js"></script>
<script src="js/index.js?rev=6a33c00f34a343a01e5367d3e784272f"></script>

当我们改变并保存了less/js文件时，被 gulp 监视到并立即执行对应的编译压缩检查改变版本号这些任务。

注意： 当修改保存了有语法错误的js文件时候：

  1. 语法出错不严重、不影响js运行时，gulp会弹出报错，但仍然会执行压缩并继续监视；如：代码结尾缺少引文分号，则：
1
2
3
4
5
6
7
[23:17:48] Starting 'js'...
[23:17:48] Starting 'rev'...
dev\js\index.js: line 5, col 16, Missing semicolon.
1 error
[23:17:48] Finished 'rev' after 22 ms
[23:17:48] Finished 'js' after 30 ms
  1. 语法出错严重，影响js运行时，gulp会报错并终止任务；如：引文分号写成中文分号：
1
2
3
4
5
6
7
8
9
10
11
12
[23:21:21] Starting 'js'...
[23:21:21] Starting 'rev'...
dev\js\index.js: line 6, col 17, Unexpected '；'.
dev\js\index.js: line 6, col 17, Missing semicolon.
2 errors
events.js:141
      throw er; // Unhandled 'error' event
      ^
 Error
    at new JS_Parse_Error (eval at <anonymous> (f:\GulpProjects\gulp_revLess1\node_modules\.npminstall\uglify-js\2.6.2\uglify-js\tools\node.js:22:1), <anonymous>:1526:18)

完了之后，发现要真在项目中应用，其实还有其它好多东西需要配置好的。下回继续学习！