第一步：
node环境下全局安装gulp
npm install gulp -g
第二步：
项目文件，并自动生成package.json文件
npm init
第三步：
安装需要的插件
npm install gulp gulp-connect gulp-concat gulp-minify-css gulp-uglify gulp-sass --save-dev
gulp (本地gulp)
gulp-connect (用于开启本地服务)
gulp-concat (用户打包多个文件)
gulp-uglify (用于压缩js文件)
gulp-minify-css (用户压缩css文件)
gulp-sass (用于编译scss文件)
--save-dev (理解为开发时需要依赖的)
--save (理解为发布后还需要依赖的)
第四步：
创建gulpfile.js文件
//导入工具包 var gulp = require(‘gulp‘); var concat = require(‘gulp-concat‘); var connect = require(‘gulp-connect‘); var uglify = require(‘gulp-uglify‘); var minifyCss = require(‘gulp-minify-css‘); //合并压缩我的js文件到build目录 gulp.task(‘myjs‘, function() { gulp.src(‘./web/**/*.js‘) .pipe(concat(‘myall.min.js‘)) .pipe(uglify()) .pipe(gulp.dest(‘./build‘)) }); //合并压缩我的css文件到build目录 gulp.task(‘mycss‘, function() { gulp.src(‘./web/**/*.css‘) .pipe(concat(‘myall.min.css‘)) .pipe(minifyCss()) .pipe(gulp.dest(‘./build‘)) }); //连接服务 gulp.task(‘connect‘, function() { connect.server({ port: 8081 }); }); // 默认任务 gulp.task(‘default‘, function(){ gulp.run(‘connect‘, ‘watch‘, ‘mycss‘, ‘myjs‘) }); // 监听文件变化 gulp.task(‘watch‘, function() { gulp.watch(‘./web/**/*.js‘, function(){ gulp.run(‘myjs‘); }); gulp.watch(‘./web/**/*.css‘, function(){ gulp.run(‘mycss‘); }); });
原文：http://www.cnblogs.com/tqt--0812/p/7531221.html