日期：2017年9月27日

用自动化构建工具增强你的工作流程——gulp

1. 全局安装 gulp：

1
2
$ npm install --global gulp
 

2. 作为项目的开发依赖（devDependencies）安装：

1
2
$ npm install --save-dev gulp
 

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

1
2
3
4
5
6
<span class="hljs-keyword">var</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);
 
gulp.task(<span class="hljs-string">'default'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  <span class="hljs-comment">// 将你的默认的任务代码放在这</span>
});
 

4. 运行 gulp：

1
2
$ gulp
 

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。

JavaScript
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var del = require('del');
var imagemin = require('gulp-imagemin'); //压缩图片 ;
//压缩css
gulp.task('indexcss', function () {
    gulp.src(['css/css.css', './js/bootstrap/css/bootstrap.min.css', './js/bootstrap/non-responsive.css', 'css/main.css']) //压缩的文件
        .pipe(concat('main.css'))
        .pipe(gulp.dest('./dist/css')) //输出文件夹
        .pipe(minifycss()); //执行压缩
});
//压缩js
gulp.task('indexjs', function () {
    gulp.src(["./js/lib/jquery-1.9.1.min.js", "./js/bootstrap/js/bootstrap.min.js", "./js/lib/jqueryui/jquery-ui.min.js", "./js/lib/jquery.cookie.js", "./js/lib/avalon.js", "./js/lang.js", "./js/util.js", "./js/lib/html2canvas.min.js", "./js/component.js", "./js/page/index.js"])
        .pipe(concat('index.main.js')) //合并所有js到main.js
        .pipe(gulp.dest('./dist/js')) //输出main.js到文件夹
        .pipe(rename({
            suffix: '.min'
        })) //rename压缩后的文件名
        .pipe(uglify({
            mangle: false,//类型：Boolean 默认：true 是否修改变量名
            compress: false//类型：Boolean 默认：true 是否完全压缩
        })) //压缩
        .pipe(gulp.dest('./dist/js')); //输出
});
// 压缩图片  
gulp.task('testimage', function () {
    gulp.src('image/*.*')
        .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('./dist/image'));
 
});
// 压缩html  
gulp.task('compressHtml', function () {
    gulp.src('*.html')
        .pipe(htmlmin({
            removeComments: true, //清除HTML注释
            collapseWhitespace: true, //压缩HTML
            collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
            minifyJS: true, //压缩页面JS
            minifyCSS: true //压缩页面CSS
        }))
        .pipe(gulp.dest('./dist'));
 
});
gulp.task('clean', function (cb) {
    del(['./dist/css', './dist/js'], cb)
});
gulp.task('default', function () {
    gulp.start('indexcss', 'indexjs', 'testimage', 'compressHtml');
});