今天不講webpack，就說說gulp是怎麽進行壓縮合並打包　

首先你的安裝gulp ：

npm install gulp -g --save-dev

然後最基本的你因該知道gulp 的四個方法，

gulp.src：讀取文件

gulp.pipe：將文件流輸入到指定的文件目錄

gulp.task：建立gulp任務，例如合並，壓縮，清除文件，

gulp.watch：用於監聽文件的變化

關於其他的嘛，那就是gulp 之所以那麽強大，原因就是他有很多插件，我們要完成一些功能就必須要學會使用一些插件

1）在這裏我給出package.json 文件中的devDependencies

    "gulp
 
": "^3.9.1",　　　　　　　　　　//安裝gulp
    "gulp-clean": "^0.3.2",　　　　　　//gulp的清除插件，主要用於每次打包發布，為了不出差錯，我們希望要刪除之前的一些文件
    "gulp-concat": "^2.6.1",　　　　　//合並文件　
    "gulp-connect": "^5.0.0",　　　　　//建立一個本地server,這樣我們就可以使用localhost：port 訪問我們的項目了　
    "gulp-livereload": "^3.8.1",　　　//實時監控　
    "gulp-minify-css": "^1.2.4",　　　//壓縮css　
    
 
"gulp-minify-html": "^1.0.6",　　//壓縮html
    "gulp-open": "^2.0.0",　　　　　　//一般與gulp-connect使用，
    "gulp-rev": "^8.1.0",　　　　　　　　//主要用於緩存文件，給文件加上一個MD5後綴。
    "gulp-rev-collector": "^1.2.3",　　//主要用於緩存文件處理，替換文件[這裏可以去了解gulp 緩存的問題，百度一下]
    "gulp-sequence": "^0.4.6",　　　　//多個任務的執行順序控制
    "gulp-sync": "^0.1.4",
    "gulp-uglify
 
": "^3.0.0",　　　　　　//壓縮js
  

2）在你完成一系列安裝之後，接下就是使用安裝的插件完成一些東西。

首先你的在你的項目文件夾中有一個gulpfile.js文件【這個文件你可以把他看作你的gulp 啟動文件】

在這個文件中你可以一一引進你安裝的gulp插件

例如：

var gulp = require("gulp");

//壓縮
var uglify = require("gulp-uglify");
var minifyCss = require("gulp-minify-css");
var minifyHtml = require("gulp-minify-html");

//清除不不要的文件
var gulpclean = require(‘gulp-clean‘);
// npm install gulp-open --save-dev

//本地打開一個地址
var open=require("open");

//npm install --svae-dev gulp-livereload（重新加載，刷新）
var livereload = require(‘gulp-livereload‘);

//npm install --svae-dev gulp-connect（本地服務器）
var connect= require(‘gulp-connect‘);

//npm install --save-dev gulp-rev-collector
//npm install --save-dev gulp-sync
var rev = require(‘gulp-rev‘);
var revCollector = require(‘gulp-rev-collector‘);

//合並文件（用於壓縮之後）
//npm install  --save-dev gulp-concat
var concat = require(‘gulp-concat‘);


 //多個任務的順序執行
//npm install --save-dev gulp-sequence
var gulpSequence = require(‘gulp-sequence‘);

當然你也可以用一個簡單的方法，可以去get一下gulp-load-plugins的使用

3）好了現在就正式使用了

gulp.task(‘js‘,function(){
 return gulp.src(‘myPro/js/**/*.js‘)
        .pipe(concat(‘main.js‘))                            //- 合並後的文件名
        .pipe(uglify())                                     //使用uglify進行壓縮,更多配置請參考：
        .pipe(rev())                                       //- 文件名加MD5後綴
        .pipe(gulp.dest(‘dist/js‘))
        .pipe(rev.manifest())                              //- 生成一個rev-manifest.json（這個文件是我們控制緩存文件的關鍵，主要用於文件替換）
        .pipe(gulp.dest(‘dist/rev/js‘))
        .pipe(livereload());
});

gulp.task(‘html‘,function(){
    return gulp.src(‘myPro/**/*.html‘)
        .pipe(minifyHtml()) //壓縮
        //.pipe(rev())
        .pipe(gulp.dest(‘dist‘))
        .pipe(livereload());
});

gulp.task(‘css‘,function(){
 return gulp.src(‘myPro/css/**/*.css‘)
        .pipe(concat(‘main.css‘))
        .pipe(minifyCss())                                   //壓縮css
        .pipe(rev())                                         //- 文件名加MD5後綴
        .pipe(gulp.dest(‘dist/css‘))
        .pipe(rev.manifest())                               //- 生成一個rev-manifest.json
        .pipe(gulp.dest(‘dist/rev/css‘))                   //- 將 rev-manifest.json 這個文件是我們控制緩存文件的關鍵，主要用於文件替換）
        .pipe(livereload());
});

gulp.task(‘watch‘, function() {
    /*
    livereload.listen({
        start:true,
        port:8080,
        reloadPage:"index.html"

    }); //要在這裏調用listen()方法
*/

    //自動刷新
    livereload.listen();
    //構建本地服務器
    connect.server({
        root:[‘myPro‘],//從開發文件讀取（默認是index.html）
        livereload:true,//重新刷新（針對高級瀏覽器）
        port:8091,//端口號
    });
    open("http://localhost:8091");//自動打開地址，網頁
    //監聽改變的文件,只要有以下的文件內容變化，就會刷新
    gulp.watch(‘myPro/css/**/*.css‘, [‘css‘]);
    gulp.watch(‘myPro/html/**/*.html‘, [‘html‘]);
    gulp.watch(‘myPro/js/**/*.js‘, [‘js‘]);
});

//清除dist文件夾
gulp.task("clean",function(){
    console.log("......do clearing......");
   return   gulp.src([‘dist‘],{read: false})    //{read: false}直接進行刪除，不需要讀取文件
       　　 .pipe(gulpclean({force: true}))     //{force: true}強制刪除
        　　.pipe(livereload());
});

//使用gulp-rev替換文件，清除緩存的弊端問題
gulp.task("rev",function(){
    return gulp.src([‘dist/**/*.json‘,‘dist/**/*.html‘])
    .pipe(revCollector({
        replaceReved: true,
    }))
     .pipe(gulp.dest(‘dist‘))
     .pipe(livereload());
});

//建立一個總的任務
gulp.task("build",[‘js‘,‘css‘,‘html‘,‘watch‘]);
//gulp.task("default",[‘build‘]);

//直接運行gulp 默認啟動server，會一次執行clean ,[js,css,html,html]（中括號裏的同步執行）,rev ,watch
//可以去了解一下gulpSequence的用法
gulp.task("default",function(cd){
    gulpSequence(‘clean‘,[‘js‘,‘css‘,‘html‘],‘rev‘,‘watch‘)(cd)
});

值得註意的是：在每個任務的回調函數我們有必要進行返回通知，通知後面的任務當前這個任務執行完啦，可以接著執行下面的任務啦。。。。。。

在這裏只是說如何使用（也只是使用了一部分），至於原理沒做深入了解。。。

https://github.com/EvalGitHub/angular1_require_gulp

使用gulp 合並壓縮打包，實時監控文件，實現本地server