【原】gulp工作中的实战
写这篇文章的目的是为了以后的项目中懒得再去配gulp，直接可以拿这篇博客中的来用，因为有时候配置还是挺烦人的。
gulp相关插件的介绍
用法比较简单，假设大家都会用gulp,下面主要介绍一下一些插件的用途
1、del 删除文件，用于清空文件
2、browser-sync 用于自动刷新浏览器，从此再也不用F5手动刷新了
3、gulp-htmlmin 用于压缩html
4、gulp-clean-css 压缩css
5、gulp-uglify 压缩js
6、gulp-replace 替换路径
7、gulp-base64 将小图背景图转为base64的形式，可以自己设置最大多少尺寸转为base64
8、gulp-imagemin 压缩图片大小，不过效果不明显，还需要自己再处理一下图片
其他想用的插件可以自己去找，基本可以项目的需要，不够就去加就行
项目实战
1、由于项目中静态资源需要替换成公司的cdn,而且公司中的项目已经升级为https，所以这里弄了一个配置文件
config.js:
var projeact = 'awardSong'; //项目名 var terminal ='mobile'; //具体哪个端（pc、mobile..） var commit = 'E:/work'; //测试环境 module.exports = { //CDN,一共有四个，到时候记得补上 cdn : ['xxx'] }
2、平时我是用sass来进行编码的，所以弄了一个sass目录，css里面的文件不用写。执行编译的时候会自动将sass编译到css文件中。
3、开发环境，执行gulp default 即可，然后在浏览器中选择你在编译的html，每次执行编译的时候，只要编辑器保存了代码，浏览器会做相应的改变。无需刷新。
4、如果要打包到生产环境，也就是发布到线上，可以执行 gulp release ,这样的话所有的静态文件就会打包到dist的目录下，而且所以的文件都是经过压缩的。当然，输出路径也是可以自己替换的
目录结构：
projecdName
+src
-css
-html
-images
-js
-sass
-config.js
-gulpfile.js
-package.json
package.json文件内容如下：
{ "name": "", "version": "1.0.0", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.18.2", "del": "^2.2.2", "gulp": "^3.9.1", "gulp-base64": "^0.1.3", "gulp-clean-css": "^2.0.13", "gulp-htmlmin": "^3.0.0", "gulp-sass": "^2.3.2", "gulp-uglify": "~0.3.1", "gulp-imagemin": "^2.2.1", "gulp-replace": "^0.5.4" } }
gulpfile.js内容如下
/* * @gulp：自动化任务 */ var gulp = require('gulp'); var rm = require('del'); //删除文件 var browserSync = require('browser-sync'); var reload = browserSync.reload; //自动刷新,从此不用F5 var htmlmin = require('gulp-htmlmin'); //压缩html var miniCSS = require('gulp-clean-css'); //压缩css var miniJS = require('gulp-uglify'); //压缩js var sass = require('gulp-sass'); //编译sass var run_os_cmd = require('child_process').exec; var replace = require('gulp-replace'); var cssBase64 = require('gulp-base64'); //将小图背景图转为base64的形式 var imagemin = require('gulp-imagemin'); /*清除产出目录*/ gulp.task('clear-dir', function() { rm.sync(['dist/**']); rm.sync(['staticPub/**']); }) //引入配置文件 var config = require('./config.js'); var cdn=config.cdn[0]; /* * html压缩 * 干掉http:和https:协议名 * 替换掉路径 */ gulp.task('mini-html', function() { return gulp.src('src/html/**.html') .pipe(replace('http://', '//')) .pipe(replace('https://', '//')) .pipe(replace(/\.\.\/(images\/\S+\.(png|gif|jpg|webp))/g, function(all,str) { return (cdn+str); })) .pipe(replace(/\.\.\/(css\/\S+\.(css|less|scss))/g,function(all,str){ return (cdn+str); })) .pipe(replace(/\.\.\/(js\/\S+\.(js))/g,function(all,str){ return (cdn+str); })) .pipe(htmlmin({ removeComments: true, //清除HTML注释 collapseWhitespace: true, //压缩HTML minifyJS: true, //压缩页面JS minifyCSS: true //压缩页面CSS })) .pipe(gulp.dest('dist/html/')) }) /*图片产出*/ gulp.task('images', function() { return gulp.src('src/images/*') // 压缩图片 .pipe(imagemin({ progressive: true })) .pipe(gulp.dest('dist/images/')) }) /*sass开发*/ gulp.task('sass_dev', function() { return gulp.src('src/sass/**.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('src/css/')) .pipe(reload({stream:true})) }) /*css压缩*/ gulp.task('mini-css', ['sass_dev'], function() { return gulp.src('src/css/**.css') .pipe(cssBase64({ maxImageSize: 8*1024 //小于8k的图转为base64 })) .pipe(replace(/\.\.\/(images\/\S+\.(png|gif|jpg|webp))/g, function(all,str) { return (cdn+str); })) .pipe(miniCSS({compatibility: 'ie6'})) .pipe(gulp.dest('dist/css/')) }) /* * js压缩 * 干掉http:和https:协议名 */ gulp.task('mini-js', function() { return gulp.src('src/js/**') .pipe(replace('http://', '//')) .pipe(replace('https://', '//')) .pipe(miniJS()) .pipe(gulp.dest('dist/js/')) }) /*自动刷新*/ gulp.task('server', function() { browserSync({ ui:false, server: { baseDir: 'src', directory: true }, notify: false, ghostMode:false, port: 8080, open: "external" }, function(err, arg) { console.log('无需再按F5刷新啦！！'); }) }) /*开发环境*/ gulp.task('default', [ 'sass_dev', 'server' ], function() { gulp.watch('src/html/*.html', reload); gulp.watch('src/js/**',reload); gulp.watch('src/sass/*.scss',['sass_dev']); }) /*生产环境*/ gulp.task('release', [ 'clear-dir', 'mini-html', 'mini-css', 'mini-js', 'images' ], function() { /* * 二次产出，可以做其他操作 */ })
项目的实际操作我发布到github了，有兴趣的可以搞一搞：https://github.com/xianyulaodi/gulpUsage
备注：代码比较简单，有一定gulp基础的都可以看的懂。主要是为了以后方便，直接拿来用即可，无需再去配置啊什么鬼。
