gulp和webpack初探

首先聲明一下，gulp和webpack二者關係不大，主要是團隊以前一直用grunt構建工具，這幾天業務上比較悠閒，老大讓我學學新的gulp和webpack這些「潮流」工具，因而草草研究了一天，記一些筆記。

gulp 真正「流程」化工具

我記得實習剛剛進公司看到grunt，仍是有點蒙，以前一直是本地開發，遊覽器F5，沒想到前端也須要「編譯工具」。因此grunt一直給個人感受是「編譯工具」，你寫的不少代碼還不能直接「執行」，須要這一個工具去「編譯」才能上線。它去自動化了不少東西，我以後也寫過一個公司用的grunt插件，只須要配置，以後加入任務執行，很方便。但當我看到gulp的代碼的時候（還沒開始看文檔，API），我忽然意識到不少grunt「不天然」的設計，gulp真正的作到了清晰的流程化的構建。

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
  gulp.src('client/*.js')
  .pipe(replace('bar', 'foo'))
  .pipe(minify())
  .pipe(gulp.dest('build/'));
});

這是我仿照官網寫的DEMO，對不少工程師來講pipe這個命名就很清晰了，它就是借鑑了unix的管道概念，前面文件輸出給後面文件，這個也就是gulp對比grunt最大的改進，更加簡單明瞭，聽說這樣也加快速度，尚未在實際項目中運用過，因此沒有對比過。無論這種設計的確能夠說是grunt的替代品了。
至於插件方面也不用擔憂，gulp的插件也很強大，基本上項目經常使用的都有。

webpack 萬劍歸宗

webpack也很火，它官網的圖也介紹了它的做用，全部前端東西都打包成js文件。初學了它，我想它解決的問題就是如今的前端各類各樣的「語言」，什麼sass呀，coffeescript，還有框架模板，語法糖什麼的，各有各的編譯工具，而webpack的loader能夠通殺，安裝好相應的工具，它就能夠通通的按你的想法打包在一塊兒。
好比vue，就能夠放在單文件裏，在團隊中作到組件開發，甚至各我的寫不一樣的模板都行。最後使用webpack將各個組件打包在一塊兒。
webpack的配置文件：

var path = require("path");

module.exports = {
    entry: './static/entry.js', //演示單入口文件
    output: {
        path: path.join(__dirname, 'out'),  //打包輸出的路徑
        filename: 'bundle.js',              //打包後的名字
        publicPath: "./static/out/"                //html引用路徑，在這裏是本地地址。
    },
    // 新添加的module屬性
    module: {
        loaders: [
      // 解析.vue文件
            { test: /\.vue$/, loader: 'vue' },
        // 轉化ES6的語法
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
        // 編譯css並自動添加css前綴
            { test: /\.css$/, loader: 'style!css!autoprefixer'},
        //.scss 文件想要編譯，scss就須要這些東西！來編譯處理
        //install css-loader style-loader sass-loader node-sass --save-dev
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
        // 圖片轉化，小於8K自動轉化爲base64的編碼
            { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
        //html模板編譯？
            { test: /\.(html|tpl)$/, loader: 'html-loader' },
        ]
    },
    // .vue的配置。須要單獨出來配置
    vue: {
        loaders: {
            css: 'style!css!autoprefixer',
            html:'html-loader'
        }
    },
};

webpack可能對於單頁應用的開發和管理頗有幫助，對於簡單的html的開發，gulp就已經綽綽有餘了。