用自动化构建工具增强你的工作流程——gulp
1. 全局安装 gulp:
$ npm install --global gulp
2. 作为项目的开发依赖(devDependencies)安装:
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js
的文件:
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4. 运行 gulp:
$ gulp
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
想要单独执行特定的任务(task),请输入 gulp <task> <othertask>
。
var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var htmlmin = require('gulp-htmlmin'); var del = require('del'); var imagemin = require('gulp-imagemin'); //压缩图片 ; //压缩css gulp.task('indexcss', function () { gulp.src(['css/css.css', './js/bootstrap/css/bootstrap.min.css', './js/bootstrap/non-responsive.css', 'css/main.css']) //压缩的文件 .pipe(concat('main.css')) .pipe(gulp.dest('./dist/css')) //输出文件夹 .pipe(minifycss()); //执行压缩 }); //压缩js gulp.task('indexjs', function () { gulp.src(["./js/lib/jquery-1.9.1.min.js", "./js/bootstrap/js/bootstrap.min.js", "./js/lib/jqueryui/jquery-ui.min.js", "./js/lib/jquery.cookie.js", "./js/lib/avalon.js", "./js/lang.js", "./js/util.js", "./js/lib/html2canvas.min.js", "./js/component.js", "./js/page/index.js"]) .pipe(concat('index.main.js')) //合并所有js到main.js .pipe(gulp.dest('./dist/js')) //输出main.js到文件夹 .pipe(rename({ suffix: '.min' })) //rename压缩后的文件名 .pipe(uglify({ mangle: false,//类型:Boolean 默认:true 是否修改变量名 compress: false//类型:Boolean 默认:true 是否完全压缩 })) //压缩 .pipe(gulp.dest('./dist/js')); //输出 }); // 压缩图片 gulp.task('testimage', function () { gulp.src('image/*.*') .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/image')); }); // 压缩html gulp.task('compressHtml', function () { gulp.src('*.html') .pipe(htmlmin({ 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" minifyJS: true, //压缩页面JS minifyCSS: true //压缩页面CSS })) .pipe(gulp.dest('./dist')); }); gulp.task('clean', function (cb) { del(['./dist/css', './dist/js'], cb) }); gulp.task('default', function () { gulp.start('indexcss', 'indexjs', 'testimage', 'compressHtml'); });