gulp的安装和使用

前置条件：

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

1，先安装gulp
npm install gulp -g

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

gulp -v

2，gulp的依赖安装
npm install gulp --save -dev

3，在项目根目录下 创建一个 gulpfile.js 文件

 

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

var gulp = 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'
        }))
})

其实总体来说还是比较简单的，在使用gulp的时候，里面也会遇到一些坑，具体哪些坑自己配置下，自己体会吧。这样才能记得牢