前端自动化构建工具gulp使用
1. 全局安装 gulp：
$ npm install --global gulp
2. 作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp3. 在项目根目录下创建一个名为 package.json 的文件：
附上本人项目基本配置
{ "devDependencies": { "concat": "0.0.1-security", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-cache": "^0.4.5", "gulp-clean": "^0.3.2", "gulp-concat": "^2.6.1", "gulp-connect": "^5.0.0", "gulp-css-spriter": "^0.4.0", "gulp-htmlmin": "^3.0.0", "gulp-imagemin": "^3.1.1", "gulp-jshint": "^2.0.4", "gulp-less": "^3.3.0", "gulp-livereload": "^3.8.1", "gulp-minify-css": "^1.2.4", "gulp-notify": "^3.0.0", "gulp-rename": "^1.2.2", "gulp-rev": "^7.1.2", "gulp-rev-collector": "^1.1.1", "gulp-ruby-sass": "^2.1.1", "gulp-sass": "^3.1.0", "gulp-sequence": "^0.4.6", "gulp-sourcemaps": "^2.4.1", "gulp-uglify": "^2.0.1", "gulp-util": "^3.0.8", "gulp-watch-path": "^0.1.0", "gulp-webserver": "^0.9.1", "htmlmin": "0.0.7", "http-server": "^0.9.0", "imagemin-pngquant": "^5.0.0", "jshint": "^2.9.4", "run-sequence": "^1.2.2", "sass": "^0.5.0", "stream-combiner2": "^1.1.1" }, "dependencies": { "browser-sync": "^2.18.8", "gulp": "^3.9.1", "gulp-imagemin": "^3.2.0", "gulp-sass": "^3.1.0", "gulp.spritesmith": "^6.4.0" } }
4. 项目目录结果：
5. 在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require(\'gulp\'), less = require(\'gulp-less\'), sass = require(\'gulp-sass\'), connect = require(\'gulp-connect\'), livereload = require(\'gulp-livereload\'), sourcemaps = require(\'gulp-sourcemaps\'), htmlmin = require(\'gulp-htmlmin\'), minifycss = require(\'gulp-minify-css\'), concat = require(\'gulp-concat\'), uglify = require(\'gulp-uglify\'), rename = require(\'gulp-rename\'), jshint = require(\'gulp-jshint\'), notify = require(\'gulp-notify\'), imagemin = require(\'gulp-imagemin\'), pngquant = require(\'imagemin-pngquant\'), runSequence = require(\'run-sequence\'), rev = require(\'gulp-rev\'), cache = require(\'gulp-cache\'), autoprefixer = require(\'gulp-autoprefixer\'), clean = require(\'gulp-clean\'), revCollector = require(\'gulp-rev-collector\'), spritesmith = require(\'gulp.spritesmith\'); //合并雪碧图 gulp.task(\'sprite\', function() { var spriteData = gulp.src(\'src/images/icon_*.png\').pipe(spritesmith({ imgName: \'images/sprite.png\', cssName: \'sass/_sprite.scss\', cssFormat: \'scss\' })); return spriteData.pipe(gulp.dest(\'src/\')); }); // less编译 gulp.task(\'less\', function() { gulp.src(\'src/less/*.less\') .pipe(sourcemaps.init()) .pipe(less()) .pipe(sourcemaps.write(\'./\')) .pipe(gulp.dest(\'src/css/\')); }); // sass编译 gulp.task(\'sass\', function() { gulp.src(\'src/sass/*.scss\') .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write(\'./\')) .pipe(gulp.dest(\'src/css/\')); }); //自动生成版本号,避免缓存 gulp.task(\'revImg\', function() { return gulp.src(\'src/images/*\') .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest(\'src/rev/img\')); }); gulp.task(\'revCss\', function() { return gulp.src(\'src/css/*.css\') .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest(\'src/rev/css\')); }); gulp.task(\'revJs\', function() { return gulp.src(\'src/js/*.js\') .pipe(rev()) .pipe(rev.manifest()) .pipe(gulp.dest(\'src/rev/js\')); }); //Html替换img、css、js文件版本 gulp.task(\'revHtml\', function() { return gulp.src([\'src/rev/**/*.json\', \'src/html/*.html\']) .pipe(revCollector()) .pipe(gulp.dest(\'src/html\')); }); //scss替换img文件版本 gulp.task(\'revScss\', function() { return gulp.src([\'src/rev/**/*.json\', \'src/sass/*.scss\']) .pipe(revCollector()) .pipe(gulp.dest(\'src/sass\')); }); //开发构建 gulp.task(\'dev\', function(done) { condition = false; runSequence( [\'revImg\'], [\'revCss\'], [\'revScss\'], [\'revJs\'], [\'revHtml\'], done); }); //css合并处理 // gulp.task(\'minifycss\',function(){ // return gulp.src(\'css/*.css\') //设置css // .pipe(concat(\'order_query.css\')) //合并css文件到"order_query" // .pipe(gulp.dest(\'styles\')) //设置输出路径 // .pipe(rename({suffix:\'.min\'})) //修改文件名 // .pipe(minifycss()) //压缩文件 // .pipe(gulp.dest(\'styles\')) //输出文件目录 // .pipe(notify({message:\'css task ok\'})); //提示成功 // }); // //JS合并处理 // gulp.task(\'minifyjs\',function(){ // return gulp.src(\'js/*.js\') //选择合并的JS // .pipe(concat(\'order_query.js\')) //合并js // .pipe(gulp.dest(\'dist/js\')) //输出 // .pipe(rename({suffix:\'.min\'})) //重命名 // .pipe(uglify()) //压缩 // .pipe(gulp.dest(\'dist/js\')) //输出 // .pipe(notify({message:"js task ok"})); //提示 // }); //压缩html gulp.task(\'html\', function() { var options = { removeComments: true, //清除HTML注释 collapseWhitespace: true, //压缩HTML collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked /> removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css" minifyJS: true, //压缩页面JS minifyCSS: true //压缩页面CSS }; gulp.src(\'src/html/*.html\') .pipe(htmlmin(options)) .pipe(gulp.dest(\'dist/html\')); }); // JS hint 检查 // gulp.task(\'jshint\', function() { // gulp.src(\'src/js/*.js\') // .pipe(jshint()) // .pipe(jshint.reporter(\'default\')); // }); //压缩js gulp.task(\'uglifyjs\', function() { gulp.src(\'src/js/*.js\') .pipe(uglify()) .pipe(gulp.dest(\'dist/js\')) }); //压缩css gulp.task(\'minifycss\', function() { gulp.src(\'src/css/*.css\') .pipe(minifycss()) .pipe(gulp.dest(\'dist/css\')) }); //压缩images gulp.task(\'imagemin\', function() { gulp.src(\'src/images/*.{png,jpg,gif,ico}\') .pipe(imagemin({ progressive: true, svgoPlugins: [{ removeViewBox: false }], //不要移除svg的viewbox属性 use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件 })) .pipe(gulp.dest(\'dist/images\')); }); //创建本地服务器 gulp.task(\'webserver\', function() { connect.server({ livereload: true }); }); //清空项目输出目录 gulp.task(\'clean\', function() { return gulp.src([\'dist/js/\', \'dist/css/\', \'dist/html/\', \'dist/images/\'], { read: false }) .pipe(clean()); }); //监控文件变化 gulp.task(\'watch\', function() { gulp.watch(\'src/less/*.less\', [\'less\']); gulp.watch(\'src/sass/*.scss\', [\'sass\']); gulp.watch(\'src/html/*.html\', [\'html\']); gulp.watch(\'src/js/*.js\', [\'uglifyjs\']); gulp.watch(\'src/css/*.css\', [\'minifycss\']); gulp.watch(\'src/images/*.*\', [\'imagemin\']); gulp.watch(\'src/images/icon_*.png\', [\'sprite\']); }); // 将你的默认的任务代码放在这 gulp.task(\'default\', [\'clean\'], function() { gulp.start(\'less\', \'sass\', \'uglifyjs\', \'minifycss\', \'html\', \'imagemin\', \'dev\', \'watch\', \'webserver\', "sprite"); // gulp.start(\'less\', \'sass\', \'uglifyjs\', \'minifycss\', \'html\', \'imagemin\', \'dev\', \'watch\', \'webserver\'); });