一、环境搭建
1、全局安装gulp:$ npm install --global gulp
2、项目依赖安装:$ npm install --save-dev gulp
3、在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4、运行 gulp:在命令行输入gulp会执行‘default’任务
二、gulp API介绍
1、gulp.src(globs[, options])
输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped到别的插件中。
gulp.src('client/templates/*.js')
.pipe(gulp.dest('build/minified_templates'));
2、gulp.dest(path[, options])
能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。
gulp.src('client/templates/*.js')
.pipe(gulp.dest('./build/templates'));
3、gulp.task(name[, deps], fn)
定义一个使用 Orchestrator 实现的任务(task)。
gulp.task('somename', function() {
// 做一些事
});
4、gulp.watch(glob[, opts], tasks)
监视文件,并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射(emit) change 事件。
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
三、开始gulp应用
1、gulp html打包
/**
* 根目录下的html文件
*collapseWhitespace: true,
*collapseBooleanAttributes: false,
*removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
*removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
*removeStyleLinkTypeAttributes: false,//删除<style>和<link>的type="text/css"
*minifyJS: true,//压缩页面JS
*minifyCSS: true//压缩页面CSS
*/
gulp.task('minifyHTML', function (cb) {
var options = {
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: false,
removeEmptyAttributes: true,
removeScriptTypeAttributes: false,
removeStyleLinkTypeAttributes: false,
minifyJS: true,
minifyCSS: true
};
pump([
gulp.src(['*.html', '!index.html', '!template.html']),
fileinclude({ //解决html文件中用include引入的模块
prefix: '@@',
basepath: '@file'
}),
htmlmin(options),
gulp.dest('dist/'),
connect.reload() //热更新
], cb)
});
2、gulp js打包
gulp.task('minifyJs', ['cleanJs'] , function (cb) {
pump([
gulp.src([`env/gulpfile.${process.env.ENV}.js`, 'app.js', 'js/**/*.js', 'js/*.js']),
uglify({ mangle: false }),
concat('all.js'),
ngAnnotate(),
rev(), //添加版本号
gulp.dest('dist/js'),
rev.manifest(),
gulp.dest('rev/js'), //生成版本号映射文件
],cb)
})
3、gulp image打包
/**
* 图片压缩
* optimizationLevel:类型:Number 默认:3 取值范围:0-7(优化等级)
* progressive: 类型:Boolean 默认:false 无损压缩jpg图片
* interlaced: 类型:Boolean 默认:false 隔行扫描gif进行渲染
* multipass: 类型:Boolean 默认:false 多次优化svg直到完全优化
* svgoPlugins: [{ removeViewBox: false }] 不要移除svg的viewbox属性
*/
gulp.task('image', function () {
var imgOption = {
optimizationLevel: 5,
progressive: true,
interlaced: true,
multipass: true,
svgoPlugins: [{ removeViewBox: false }]
};
gulp.src(['image/**/*'])
.pipe(imagemin({ progressive: true }))
.pipe(gulp.dest('dist/image'))
.pipe(connect.reload())
})
四、gulp很简单,但gulp插件太多,需根据需求来配置,使用方式也很简单,npm上会有使用说明及实例,在这里介绍一下以下插件:
var gulp = require("gulp"),//gulp基础包
rename = require("gulp-rename"),//重命名
imagemin = require('gulp-imagemin'),//图片压缩
autoprefixer = require('gulp-autoprefixer'),//补充前缀
notify = require('gulp-notify'),//提示信息
jshint = require('gulp-jshint'),//js检测
clean = require('gulp-clean'),//清楚文件
htmlmin = require('gulp-htmlmin'),//html压缩
concat = require("gulp-concat"),//合并js
cssmin = require('gulp-cssmin'),//压缩css
sourcemaps = require('gulp-sourcemaps'),
uglify = require("gulp-uglify"),//压缩js
ngAnnotate = require('gulp-ng-annotate'),//angular依赖
pump = require('pump'),//错误报告到具体的文件
fileinclude = require('gulp-file-include'),//打包时倒入文件中include引入的文件
concatCss = require('gulp-concat-css'),//合并css
postcss = require('gulp-postcss'),//自动生成前缀
autoprefixer = require('autoprefixer'),//postcss参数,兼容主流浏览器两个版本,是否美化属性值
connect = require('gulp-connect'),//实现热更新
rev = require('gulp-rev'), //生成版本号
revCollector = require('gulp-rev-collector'),//根据映射文件替换html文件中的资源路劲
open = require('gulp-open');//引入open模块,注意不是gulp-open
有需求的朋友可以一起研究讨论......