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, //压缩HTMLcollapseBooleanAttributes: 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, //压缩页面JSminifyCSS: 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');
});