构建gulp环境

第一步：

　　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‘);
    });
});