前置条件:
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'
}))
})