用自动化构建工具增强你的工作流程！
Gulp 是基于node.js的一个前端自动化构建工具，开发者可以使用它构建自动化工作流程（前端集成开发环境）。 使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。 例如：你可以用gulp可以网页自动刷新，和MVVM开发模式很相似。你也可以使用gulp对sass进行预处理、代码检测、图片优化压缩、只需要一个简单的指令就能全部完成。
全局安装 gulp
$ npm install --global gulp
作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require('gulp');gulp.task('default', function() { // 将你的默认的任务代码放在这}); 运行 gulp：
$ gulp
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入gulp <task> <othertask>。
gulpfile.js示例
var gulp = require('gulp') cssmin = require('gulp-minify-css') //css压缩 uglify = require('gulp-uglify') //js压缩 javascriptObfuscator = require('gulp-javascript-obfuscator') // js混淆 imagemin = require('gulp-imagemin') //图片的压缩 base64 = require('gulp-base64') //- 把小图片转成base64字符串 htmlmin = require('gulp-htmlmin') //html的压缩 babel = require('gulp-babel') rename = require("gulp-rename") //压缩 css文件 和base64 和文件名加md5后缀gulp.task('testCssmin', function () { gulp.src('original/css/*.css') .pipe(base64()) // .pipe(rev()) //文件名加md5后缀 .pipe(cssmin()) // .pipe(rev.manifest()) //rev-mainfest.json文件，里面是压缩文件的信息 .pipe(gulp.dest('dist/css'));}); // 压缩 js 文件gulp.task('script', function() { // 1. 找到文件 gulp.src('original/js/*.js') .pipe(babel()) // 2. 压缩文件 .pipe(uglify()) // 3. 混淆js .pipe(javascriptObfuscator({ compact:true, selfDefending:true })) // 4. 都添加.min.js后缀 .pipe(rename({suffix: '.min'})) // 5. 另存压缩后的文件 .pipe(gulp.dest('dist/js/'))})//压缩 img文件gulp.task('testImagemin', function () { gulp.src('original/images/common/*.{png,jpg,gif,ico,svg}') .pipe(imagemin({ optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化 })) .pipe(gulp.dest('dist/images/common'));});//压缩html文件gulp.task('testHtmlmin', function () { var options = { removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 ==> removeEmptyAttributes: true,//删除所有空格作属性值 ==> removeScriptTypeAttributes: true,//删除 package示例
{ "name": "test", "version": "0.0.1", "description": "", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.2.2", "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "gulp": "^3.9.1", "gulp-babel": "^8.0.0", "gulp-base64": "^0.1.2", "gulp-concat": "^2.6.1", "gulp-htmlmin": "^4.0.0", "gulp-imagemin": "^4.1.0", "gulp-javascript-obfuscator": "^1.1.5", "gulp-livereload": "^3.8.1", "gulp-minify-css": "^1.2.4", "gulp-processhtml": "^1.2.0", "gulp-rev": "^8.1.1", "gulp-rev-collector": "^1.2.4", "gulp-uglify": "^3.0.0" }, "dependencies": { "gulp-rename": "^1.4.0" }}