1.安装Gulp：
npm install -g gulp
2.安装Gulp依赖包，安装你需要的插件:
npm install --save-dev gulp gulp-util
npm install --save-dev gulp-uglify gulp-concat
3.创建配置文件gulpfile.js
- require引入依赖和插件
- 定义任务
- 配置默认任务
4.gulp命令运行任务
?如下：
1 //定义依赖和插件 2 var gulp = require('gulp'), 3 uglify = require('gulp-uglify'), 4 concat = require('gulp-concat'), 5 rename = require('gulp-rename'), 6 connect = require('gulp-connect'), //livereload 7 rev = require('gulp-rev'), //文件名加md5 8 revCollector = require('gulp-rev-collector'); 9 10 var jsSrc = 'src/js/*.js';11 var jsDist = 'dist/js';12 13 var htmlSrc = 'src/*.html';14 var htmlDist = 'dist';15 16 //定义名为js的任务17 gulp.task('js', function () {18 19 gulp.src(jsSrc)20 .pipe(concat('main.js'))21 .pipe(gulp.dest(jsDist))22 .pipe(rename({suffix: '.min'}))23 .pipe(uglify())24 .pipe(gulp.dest(jsDist))25 .pipe(rev())26 .pipe(gulp.dest(jsDist))27 .pipe(rev.manifest())28 .pipe(gulp.dest('rev'))29 .pipe(connect.reload())30 31 });32 33 //文件路径替换34 gulp.task('rev', function () {35 gulp.src(['rev/*.json', 'dist/index.html'])36 .pipe(revCollector())37 .pipe(gulp.dest('dist'))38 .pipe(connect.reload());39 });40 41 //定义html任务42 gulp.task('html', function () {43 44 gulp.src(htmlSrc)45 .pipe(gulp.dest(htmlDist))46 .pipe(connect.reload());47 48 });49 50 gulp.task('connect', function () {51 connect.server({52 livereload: true53 });54 });55 56 57 //定义看守任务58 gulp.task('watch', function () {59 60 gulp.watch('src/*.html', ['html']);61 62 gulp.watch('src/js/*.js', ['js']);63 64 });65 66 67 //定义默认任务68 gulp.task('default', [ 'js', 'html','watch', 'connect']);
附：常用的插件
