用自动化构建工具增强你的工作流程!
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
。
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,//删除