1.要在node环境下

2.

全局安装npm install gulp -g   

项目中安装npm install gulp --save-dev 

3.安装插件

• sass的编译（gulp-ruby-sass）
• 自动添加css前缀（gulp-autoprefixer）
• 压缩css（gulp-minify-css）
• js代码校验（gulp-jshint）
• 合并js文件（gulp-concat）
• 压缩js代码（gulp-uglify）
• 压缩图片（gulp-imagemin）
• 自动刷新页面（gulp-livereload）
• 图片缓存，只有图片替换了才压缩（gulp-cache）
  var gulp = require('gulp'),    minifycss = require('gulp-minify-css'),    concat = require('gulp-concat'),    uglify = require('gulp-uglify'),    rename = require('gulp-rename'),    del = require('del');gulp.task('minifycss', function() {    return gulp.src('css/*.css')      //压缩的文件        .pipe(concat('main.css'))        .pipe(minifycss())  //执行压缩        .pipe(gulp.dest('minified/css')) ;  //输出文件夹});gulp.task('minifyjs', function() {    return gulp.src('js/*.js')        .pipe(concat('main.js'))    //合并所有js到main.js        .pipe(gulp.dest('minified/js'))    //输出main.js到文件夹        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名        .pipe(uglify())    //压缩        .pipe(gulp.dest('minified/js'));  //输出});gulp.task('clean', function(cb) {    del(['minified/css', 'minified/js'], cb)});gulp.task('default',function() {    gulp.start('minifycss', 'minifyjs');});

  　　在cmd中运行gulp即可。

• 更改提醒（gulp-notify）
• 清除文件（del）

安装这些插件需要运行如下命令：

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

4.在项目根目录创建gulpfile.js