前端自動化 package gulp webpack淺析

package.json NPM包的相關資訊， 包含各種所需要的子產品以及項目的配置資訊包括  名稱 ， 版本 ， 許可證等 在執行npm init時，會自動下載下傳所有依賴項。

{
  "name" : "packageDemo",　　//目前包（項目）的名字
  "description" : "learn npm package.",
  "keywords" : ["npm", "nodejs", "server", "client", "browser"],
  "author" : "Vivia",
  "contributors" : [],
  "dependencies" : [],//生産依賴
  "devDependencies”:[],//開發依賴
  "repository" : {"type": "git", "url": "https://github.com/viviarui/webapp.git"},
  "scripts": {
    "build": "node build.js"
  }
  "main" : "index.js",　　　//目前項目（包）的入口檔案，該檔案的導出對象作為該子產品的導出對象　
  "version" : "1.1.6"
}           

gulp 基于流的前端自動建構工具，能自動完成檔案的測試，檢查，合并，壓縮，格式化，浏覽器自動重新整理，部署檔案生成，并監聽檔案在改動之後重複這些步驟。 pipe （前一級輸出---後一級輸入） 相比grunt (頻繁的IO)更加靈活， gulp的API gulp.task() 用來定義任務 gulp .task( name [, deps] , fn ) name  為任務名 deps  是目前定義的任務需要依賴的其他任務，為一個數組。目前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個參數 fn  為任務函數，我們把任務要執行的代碼都寫在裡面。該參數也是可選的。

gulp.src() 用來擷取流的 globs 參數是檔案比對模式(類似正規表達式)，用來比對檔案路徑(包括檔案名)，當然這裡也可以直接指定某個具體的檔案路徑。當有多個比對模式時，該參數可以為一個數組。 options 為可選參數。通常情況下我們不需要用到。

gulp.dest() 是用來寫檔案的，其文法為： gulp .dest( path [,options] ) path 為寫入檔案的路徑 options 為一個可選的參數對象，通常我們不需要用到

gulp.watch() 用來監視檔案的變化，當檔案發生變化後，我們可以利用它來執行相應的任務，例如檔案壓縮等。其文法為 gulp .watch( glob [, opts] , tasks ) glob  為要監視的檔案比對模式，規則和用法與 gulp.src() 方法中的 glob 相同。 opts  為一個可選的配置對象，通常不需要用到 tasks  為檔案變化後要執行的任務，為一個數組

一個簡單的Gulpfile.js配置格式

var gulp = require('gulp');
    var jshint = require('gulp-jshint');
    var concat = require('gulp-concat');
    var rename = require('gulp-rename');
    var uglify = require('gulp-uglify');

    // Lint JS
    gulp.task('lint', function() {
    return gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
    });

    // Concat & Minify JS
    gulp.task('minify', function(){
        return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
    });

    // Watch Our Files
    gulp.task('watch', function() {
        gulp.watch('src/*.js', ['lint', 'minify']);
    });

    // Default
    gulp.task('default', ['lint', 'minify', 'watch']);           

webpack 基于NodeJS的子產品打包工具，找到JS子產品以及其他的一些浏覽器不能直接運作的拓展語言，并将其打包為合适的格式以供浏覽器使用。把項目當成一個整體，通過一個給定的主檔案（index.js）webpack将這個檔案找到所依賴的檔案，使用loaders處理，最後打包成一個浏覽器可識别的JS檔案（bundle.js） webpack.config.js是配置檔案

module.exports = {
  entry: './index.js',

  output: {
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}