gulp安装与使用

前置条件：

gulp 是基于node环境运行的，必须先下载node和对node环境的一些简单了解使用

1，先安装gulp

npm install gulp -g

检查是否安装成功和查看版本号

gulp -v

2，gulp的依赖安装

npm install gulp --save -dev

3，在项目根（src同级）目录下 创建一个 gulpfile.js 文件

4，在gulpfile.js文件里面引入gulp

vargulp = require("gulp");

5，npm 下载gulp相关的各种插件（具体看你自己的需求，需要哪些插件）

var gulp = require("gulp");

var webserver = require('gulp-webserver'); //启动服务器

var open = require('gulp-open'); //打开浏览器

var htmlmin = require('gulp-htmlmin'); //压缩html

var gulpRemoveHtml = require('gulp-remove-html'); //标签清除，参考：https://www.npmjs.com/package/gulp-remove-html

var removeEmptyLines = require('gulp-remove-empty-lines'); //清除空白行，参考：https://www.npmjs.com/package/gulp-remove-empty-lines

var imagemin = require("gulp-imagemin"); //压缩图片

var uglify = require("gulp-uglify"); //压缩js文件大小

var less = require("gulp-less"); //less 预处理

var rename = require("gulp-rename"); //重命名文件

var concat = require("gulp-concat"); //合并文件

var minifycss = require('gulp-minify-css'); //css压缩

var notify = require('gulp-notify'); //错误处理（我们用notify的功能主要有两点，显示报错信息和报错后不终止当前gulp任务）

var cache = require('gulp-cache'); //只压缩修改的图片

var revCollector = require('gulp-rev-collector'); //路径替换

var babel = require("gulp-babel"); //es6转es5

var rev = require('gulp-rev'); //修改文件名称（对文件名加MD5后缀）

var clean = require('gulp-clean'); //删除目录

var obfuscate = require('gulp-javascript-obfuscator'); //混淆代码

6，gulp 执行任务描述

创建一个任务。

gulp.task

当前需要执行的文件路径

gulp.src

管道方法。将上一个方法的返回结果传给另外一个处理器。

pipe

将处理完后的文件，放到指定的目录下。

gulp.dest

7，gulp具体的使用实例

//js文件压缩，转码

//打包任务 gulp js

gulp.task('js', function() {

    //需要执行的文件目录，代表是src/js下面所有文件

    return gulp.src("src/js/*.*")

        //修改文件名称（对文件名加MD5后缀）

        .pipe(rev())

        //babel 转码

        .pipe(babel())

        //压缩js文件大小

        .pipe(uglify({

            mangle: true

        }))

        //混淆代码

        .pipe(obfuscate())

        //打包完之后的文件位置

        .pipe(gulp.dest("dist/js"))

        //生成rev文件

        .pipe(rev.manifest())

        //生成完之后的文件位置

        .pipe(gulp.dest('rev/js'))

        //错误处理

        .pipe(notify({

            message: 'js task complete'

        }))

})