1.gulp需要有node.js的环境，进入官网下载node.js，可以直接运行安装。
2.安装好node.js后，在e盘下新建test文件夹。
3.在test目录下进入命令行，首先安装淘宝的cnpm，操作命令如下：
4.安装全局的gulp：
5.初始化package.json：
6.安装工程目录下的gulp以及一系列组件，下面没有进行gulp-conenct的安装。也需要进行安装：
7.test下的目录结构为：
8.工程目录下直接编写gulpfile.js文件：
var gulp = require('gulp'),
mincss = require('gulp-mini-css'),
uglify = require('gulp-uglify');
concat = require('gulp-concat');
connect = require('gulp-connect');
var src_css = './src/css',
dest_css = './dest/css',
src_js = './src/js',
dest_js = './dest/js';
gulp.task('mincss', function () {
gulp.src(src_css+'/*.css')
.pipe(mincss().on('error', function(e){
console.log(e);
})) //用于查找出错点
.pipe(gulp.dest(dest_css));
});
gulp.task('minjs', function () {
gulp.src(src_js+'/*.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))//用于查找出错点
.pipe(concat("all.min.js"))//合并文件
.pipe(gulp.dest(dest_js));
});
gulp.task('watch', function () {
gulp.watch(src_css+'/*.css',['mincss']);
gulp.watch(src_js+'/*.js',['minjs']);
});
gulp.task('connect', function() {
connect.server();
}); //服务器
gulp.task('default',function(){
gulp.run('minjs','mincss');
gulp.run('watch');
gulp.run('connect');
});
10.编写模板文件，用于读写json数据：
11.命令行，运行gulp。
12.打开网页查看效果，修改js引用无影响：