1. 全局安装 gulp:
1
| $ npm install --global gulp
|
2. 作为项目的开发依赖(devDependencies)安装:
1
| $ npm install --save-dev gulp
|
3. 在项目根目录下创建一个名为 gulpfile.js
的文件:
1 2 3 4 5
| var gulp = require('gulp');
gulp.task('default', function() { });
|
4. 运行 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, //省略布尔属性的值 ==>
removeEmptyAttributes: true, //删除所有空格作属性值 ==>
removeScriptTypeAttributes: true, //删除