npm install -g gulp  //全局安装

npm install --save-dev gulp

gulp -v

* 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）
* 更改提醒（gulp-notify）
* 清除文件（del）

//    js/app.js：指定确切的文件名。
//    js/*.js：某个目录所有后缀名为js的文件。
//    js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
//    !js/app.js：除了js/app.js以外的所有文件。
//    *.+(js|css)：匹配项目根目录下，所有后缀名为js或css的文件。//引入gulp插件node模块
var gulp = require('gulp'),sass = require('gulp-ruby-sass'),autoprefixer = require('gulp-autoprefixer'),//gminifycss = require('gulp-minify-css'),compass = require("gulp-compass"),jshint = require('gulp-jshint'),sourcemaps = require('gulp-sourcemaps'),minicss = require('gulp-mini-css'),connect = require('gulp-connect'),rename = require('gulp-rename'),uglify = require('gulp-uglify'),imagemin = require('gulp-imagemin'),concat = require('gulp-concat'),livereload = require('gulp-livereload'),notify = require('gulp-notify');//Gulp 仅有 5 个方法就能组合出你需要的任务流程：task, run, watch, src, dest// 定义web模块,类似于全局的http-servergulp.task('http-server', function() {connect.server({livereload: true});});//gulp.task(name, fn)gulp模块的task方法，用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。gulp.task('uglify',function(){//gulp.src(glob)返回了一个可读的stream，如此行返回了./js/*.js下的全部gulp.src('./js/*.js').pipe(uglify())//gulp.dest(glob)返回一个可写的stream，如此行是将文件流写入到 ./dist/js 里的对应路径下            .pipe(gulp.dest('./dist/js')).pipe(notify({message:'可以了 ok !'}))})//压缩样式gulp.task('mincss',function(){gulp.src('./css/*.css').pipe(mincss()).pipe(gulp.dest('./dist/js'))})// 创建Compass任务gulp.task('compass', function() {gulp.src('./scss/**').pipe(compass({comments: false,css: 'css',sass: 'scss',image: 'img'}));});    //编译sassgulp.task("sass",function(){gulp.src('./scss/.scss').pipe(sourcemaps.init()).pipe(sass()).pipe(mincss()).pipe(sourcemaps.write('/')).pipe(gulp.dest('./css/*.css'))})//检查jsgulp.task("jshint",function(){gulp.src("./js/.js").pipe(jshint()).pipe(jshint.reporter('default')); //导入到模块任务里面
    })// 合并、压缩文件gulp.task('scripts', function() {gulp.src('./js/*.js').pipe(concat('all.js')).pipe(gulp.dest('./dist/js')).pipe(rename('all.min.js')).pipe(uglify()).pipe(gulp.dest('./dist/js')).pipe(livereload())});    //压缩图片gulp.task('imagemin',function(){gulp.src('./image/*.*').pipe(imagemin()).pipe(gulp.dest('./dist/image')).pipe(notify({message:'compress ok !'}))})// 检测HTML变化并刷新gulp.task("html",function(){gulp.src('*.*').pipe(livereload());        })//定义名为"watch"的任务gulp.task('watch',function(){gulp.watch('./image/*.*');gulp.watch('./js/*.js');gulp.watch('./css/*.css');gulp.watch('./scss/*.scss');})    //每个gulpfile.js里都应当有一个dafault任务，它是缺省任务入口（类似C语言的main()入口），运行gulp的时候实际只是调用该任务（从而来调用其它的任务）gulp.task('default',function(){//gulp.run(tasks)表示运行对应的任务，这里表示执行名gulp.run('uglify','imagemin','compass');//执行'watch'监听任务gulp.run('watch');    // 监听文件变化
        gulp.watch(['*.*','./scss/**', './img/**','./js/*.js'], function() {livereload.listen();gulp.run('compass', 'lint', 'html', 'sass','imagemin','scripts');});        })

gulp watch