構建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');
    });
});