#gulp#操作手册_前端资源构建工具gulp

1. 安装nodejs

操作

前往nodejs官网，点击下载安装包。

858643846-57dfba80aa8af_articlex.png

下载下来是一个镜像文件，点击安装即可。

怎样检测nodejs是否安装成功？

快捷键 win+r 打开DOS命令窗口, 敲入 node -v ，输出node的版本号，即为安装成功。

2691612478-57dfbb89c9b0d_articlex.png

2. 全局安装cnpm

操作

DOS窗口任意目录下，敲入npm install cnpm -g --registry=https://registry.npm.taobao.org
回车，开始安装cnpm

怎样检测cnpm是否安装成功？

DOS窗口任意目录下，敲入cnpm -v，输出cnpm的版本号，即为安装成功。

3916931146-57dfbe18eb552_articlex.png

3. 全局安装gulp

操作

DOS窗口任意目录下，敲入cnpm install gulp -g
回车，开始安装gulp

怎样检测gulp是否安装成功？

DOS窗口任意目录下，敲入gulp -v，输出gulp的版本号，即为安装成功。

Paste_Image.png

4. 为项目安装cnpm

DOS命令到项目的根目录，敲入cnpm init，回车，会提示输入name,version等信息，不填，直接回车，接着提示Is this OK? 输入y，回车。

891434793-57dfbfccf1482_articlex.png

会看到根目录下多了一个文件package.json，打开这个文件，会看到其中的内容为：

{
  "name": "cloudbox.weixin",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

将其修改为：

    {
  "name": "cloudbox.weixin",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-cache": "^0.4.5",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^2.0.12",
    "gulp-concat": "^2.6.0",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-jshint": "^2.0.1",
    "gulp-load-plugins": "^1.3.0",
    "gulp-minify-html": "^1.0.6",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sequence": "^0.4.6",
    "gulp-uglify": "^2.0.0",
    "imagemin-pngquant": "^5.0.0",
    "jshint": "^2.9.3"
  }
}

在根目录下新建一个空白文件，命名为gulpfile.js，用记事本或者其他文本编辑器将其打开。将以下代码粘贴进去，并保存。

var gulp = require('gulp'),
    cache = require('gulp-cache'), // 图片快取，只有更改过得图片会进行压缩
    clean = require('gulp-clean'), // 清理目录或文件
    cleanCss = require('gulp-clean-css'), // 压缩css
    concat = require('gulp-concat'), // 文件合并 合并css/js文件 减少页面的Http请求
    htmlmin = require('gulp-htmlmin'), // 压缩html
    imagemin = require('gulp-imagemin'), // 图片压缩
    imageminPngquant = require('imagemin-pngquant'),
    jshint = require('gulp-jshint'),
    minifyHtml = require('gulp-minify-html'), // 压缩html
    rename = require('gulp-rename'), // 文件重命名
    rev = require('gulp-rev'), // 加MD5后缀
    revCollector = require('gulp-rev-collector'), // 根据manifests 替换html中引入的路径
    sequence = require('gulp-sequence'), // 按顺序执行任务
    uglify = require('gulp-uglify'), // 混淆js
    del = require('del'); // 删除当前文件所在的目录下的文件夹

// 压缩css 并加MD5后缀
gulp.task('cleanCss', function () {
    return  gulp.src('weixin/resources/css/**/*.css') // 需要压缩的css文件
            //.pipe(concat('style.min.css')) // 合并后的文件名
            //.pipe(rename({suffix : '.min'})) // 重命名压缩后的css文件
            .pipe(cleanCss()) //执行压缩
            //.pipe(gulp.dest('dist/resources/css')) // 压缩后的输出目录
            .pipe(rev()) // 文件名加MD5后缀
            .pipe(gulp.dest('dist/resources/css')) // 输出目录
            .pipe(rev.manifest()) // 生成一个rev-manifest.json
            .pipe(gulp.dest('dist/resources/rev/css')) // 将 rev-manifest.json 保存到 rev/css 目录内
});

// 压缩js 并加MD5后缀
gulp.task('minifyJs', function () {
    return  gulp.src('weixin/resources/js/**/*.js') // 需要压缩的Js文件
            //.pipe(rename({suffix : '.min'})) // 重命名压缩后的Js文件
            .pipe(uglify()) // 执行压缩
            .pipe(rev()) // 文件名加MD5后缀
            .pipe(gulp.dest('dist/resources/js')) // 压缩后的输出目录
            .pipe(rev.manifest())
            .pipe(gulp.dest('dist/resources/rev/js'))
});

// 压缩图片
gulp.task('imageMin', function () {
    return  gulp.src('weixin/resources/images/**.*')
            //.pipe(imagemin())
            //.pipe(rev()) // 文件名加MD5后缀
            .pipe(gulp.dest('dist/resources/images'))
            //.pipe(rev.manifest())
            //.pipe(gulp.dest('dist/resources/rev/images'))
});

// 修改引入的文件名
gulp.task('rev', function () {
    return  gulp.src(['dist/resources/rev/**/*.json', 'weixin/*.html']) // 读取 rev-manifest.json 文件以及需要进行css名替换的文件
            .pipe(revCollector()) // css名替换
            .pipe(gulp.dest('dist/')); // 输出目录
});

gulp.task('build', function (done) {
  sequence(
     ['cleanCss', 'minifyJs', 'imageMin'],
     ['rev'],
  done);
});

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