我爱工程化 之 gulp 使用（二）
上一篇 介绍了gulp的安装、环境等配置、基本使用，那么现在，我们快走进 速8，深入了解吧......
一、各种安装、环境配置、插件安装（参考上一篇文章）
二、项目基本目录结构
三、编写 gulpfile.js 文件
gulp通过gulpfile.js文件来完成相关任务
示例目录
gulpfile.js
//引入gulp及组件 var gulp = require('gulp'), //基础库 htmlmin = require('gulp-htmlmin'), //压缩html rev = require('gulp-rev-append'), //给页面的引用添加版本号，清除页面引用缓存 //autoprefixer = require('gulp-autoprefixer'), //根据设置浏览器版本自动处理浏览器前缀 //cssmin= require('gulp-minify-css'), //css压缩（已经作废） cssmin= require('gulp-clean-css'), //css压缩 cssver = require('gulp-make-css-url-version'), // css文件引用URL加版本号 jshint = require('gulp-jshint'), //js检查 jsmin = require('gulp-uglify'), //js压缩 concat = require('gulp-concat'), //合并文件 rename = require('gulp-rename'), //文件重命名 imagemin = require('gulp-imagemin'), //图片压缩 pngquant = require('imagemin-pngquant'), //深度压缩png图片 cache = require('gulp-cache'), //图片快取，只有更改过得图片会进行压缩 notify = require('gulp-notify'), //更动通知 clean = require('gulp-clean'); //清空文件夹 connect = require('gulp-connect'), //web服务 browserSync = require('browser-sync'), //浏览器同步 reload = browserSync.reload; //自动刷新 //配置开发和发布路径 var path = { //开发环境 src:{ html:'./src/*.html', css:['./src/css/*.css'], js:['./src/js/index.js'], //js:['./src/js/*.js','!./src/js/{zepto.min}.js'], //sass:'./src/sass', image:'./src/images/**/*' }, //发布环境 build:{ html:'./build', js:'./build/js', css:'./build/css', image:'./build/images' }, //不被处理的文件得复制 copy:[ {from:'./src/audio/*',to:'./build/audio'}, {from:['./src/js/*','!./src/js/index.js'],to:'./build/js'} ], clear:['./build/*.html', './build/css/main.css', './build/js/main.js', './build/images' ] }; /** * 建立任务 * */ // 定义web服务模块 gulp.task('webserver', function() { connect.server({ livereload: true, port: 8888 }); }); // 定义web服务模块，增加浏览器同步浏览 gulp.task('browser-sync', function() { browserSync({ server: { baseDir: '.' } }); }); //1.HTML压缩 /*注意:压缩时，textarea会出错，需要手动修改*/ gulp.task('html', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true,//删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true//删除<style>和<link>的type="text/css" /*不要压页面中的JS和CSS容易出错*/ //minifyJS: true,//压缩页面JS //minifyCSS: true//压缩页面CSS }; gulp.src(path.src.html) .pipe(rev()) //.pipe(htmlmin(options)) .pipe(gulp.dest(path.build.html)) .pipe(reload({stream: true})) .pipe(notify({message:'Html task complete'})); }); //2.CSS压缩(基本使用) 合并之后，记得手动修改html中的引入路径 gulp.task('css', function () { gulp.src(path.src.css) // .pipe(autoprefixer({ // browsers: ['last 2 versions'], // //是否美化属性值 默认：true 像这样： // //-webkit-transform: rotate(45deg); // // transform: rotate(45deg); // cascade:true, // remove:true //是否去掉不必要的前缀 默认：true // })) .pipe(concat('index.css')) .pipe(cssver()) // CSS文件引用URl加版本号 .pipe(cssmin({ advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）] compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式] keepBreaks: false,//类型：Boolean 默认：false [是否保留换行] keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀 })) //.pipe(rename({ suffix: '.min' })) //如果是多个css合并，记得修改html引入文件的名字 .pipe(gulp.dest(path.build.css)) .pipe(reload({stream: true})) .pipe(notify({message:'Css task complete'})); }); //3.js语法检查及压缩 gulp.task('js', function () { gulp.src(path.src.js) .pipe(jshint()) .pipe(jshint.reporter('default')) //.pipe(concat('main.js')) .pipe(jsmin()) //.pipe(rename({suffix: '.min' })) .pipe(gulp.dest(path.build.js)) .pipe(reload({stream: true})) .pipe(notify({message:'Javascript task complete'})); }); //4.图片处理 gulp.task('image', function(){ return gulp.src(path.src.image) .pipe(cache(imagemin({ optimizationLevel:5,//类型：Number 默认：3 取值范围：0-7（优化等级） progressive:true,//类型：Boolean 默认：false 无损压缩jpg图片 interlaced:true,//类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass:true,//类型：Boolean 默认：false 多次优化svg直到完全优化 use: [pngquant()] //深度处理png格式的图片 }))) .pipe(gulp.dest(path.build.image)) .pipe(reload({stream: true})) .pipe(notify({message:'Images task complete'})); }); //5.复制文件 gulp.task('copy', function(){ for(var i=0,items=path.copy,len=items.length;i<len;i++){ gulp.src(items[i].from).pipe(gulp.dest(items[i].to)) .pipe(notify({message:'copy task complete'})); } }); //6.清空图片、样式、js gulp.task('clean', function() { gulp.src(path.clear,{read: false}) .pipe(clean()) .pipe(notify({message: 'Clean task complete'})); }); //7.默认任务 清空图片、样式、js并重建 运行语句 gulp gulp.task('default', ['clean'], function(){ gulp.start('html','css','js','image','copy'); }); //X.监听任务 运行语句 gulp watch //watch方法是用于监听文件变化，文件一修改就会执行指定的任务 gulp.task('watch', function () { //监听html gulp.watch(path.src.html, function (event) { gulp.run('html'); }); // 监听css gulp.watch(path.src.css, function () { gulp.run('css'); }); // 监听js gulp.watch(path.src.js, function () { gulp.run('js'); }); // 监听images gulp.watch(path.src.image, function () { gulp.run('image'); }); });
四、任务运行
前提，cmd进入项目目录
可以一个任务一个任务的执行，例如: gulp html html对应的是 gulp.task('html', function () {}
这里面我要用批量任务方式，直接运行gulp命令，一波流搞定对应的是
gulp.task('default', ['clean'], function(){
gulp.start('html','css','js','image','copy');
});
结果：
该有的全有了，帅吧。
六、复用gulp环境及配置工具
本人最讨厌的事情就是，重复、没意思的事情不断去做，有那时间还不如撩个妹儿，打个灰机呢，有人可能不屑于复用，那算你牛逼，我是拯救不了你这样的单身狗了......
复用gulp的好处：不用再次本地安装那么多插件了，如果你非要再装一次，那 I 服了 YOU！
我复用的步骤如下：
1.先将这个demo备份，以防自己改错，然后就SB了
2.将src里面的内容替换成自己项目的内容
3.删除build整个文件夹
4.修改gulpfile.js
根据自己情况，修改文件即可
