gulp和webpack初探

jhhfft 發(fā)布于2019-08-19 18:40 / 875人閱讀

摘要：首先聲明一下，和兩者關(guān)系不大，主要是團隊之前一直用構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的和這些潮流工具，于是草草研究了一天，記一些筆記。最后使用將各個組件打包在一起。

首先聲明一下，gulp和webpack兩者關(guān)系不大，主要是團隊之前一直用grunt構(gòu)建工具，這幾天業(yè)務(wù)上比較清閑，老大讓我學(xué)學(xué)新的gulp和webpack這些“潮流”工具，于是草草研究了一天，記一些筆記。

gulp 真正“流程”化工具

我記得實習(xí)剛剛進公司看到grunt，還是有點蒙，之前一直是本地開發(fā)，游覽器F5，沒想到前端也需要“編譯工具”。所以grunt一直給我的感覺是“編譯工具”，你寫的很多代碼還不能直接“執(zhí)行”，需要這一個工具去“編譯”才能上線。它去自動化了很多東西，我之后也寫過一個公司用的grunt插件，只需要配置，之后加入任務(wù)執(zhí)行，很方便。但當(dāng)我看到gulp的代碼的時候（還沒開始看文檔，API），我突然意識到很多grunt“不自然”的設(shè)計，gulp真正的做到了清晰的流程化的構(gòu)建。

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

這是我仿照官網(wǎng)寫的DEMO，對很多工程師來說pipe這個命名就很清晰了，它就是借鑒了unix的管道概念，前面文件輸出給后面文件，這個也就是gulp對比grunt最大的改進，更加簡單明了，據(jù)說這樣也加快速度，還沒有在實際項目中運用過，所以沒有對比過。不管這種設(shè)計的確可以說是grunt的替代品了。
至于插件方面也不用擔(dān)心，gulp的插件也很強大，基本上項目常用的都有。

webpack 萬劍歸宗

webpack也很火，它官網(wǎng)的圖也介紹了它的作用，所有前端東西都打包成js文件。初學(xué)了它，我想它解決的問題就是現(xiàn)在的前端各種各樣的“語言”，什么sass呀，coffeescript，還有框架模板，語法糖什么的，各有各的編譯工具，而webpack的loader可以通殺，安裝好相應(yīng)的工具，它就可以統(tǒng)統(tǒng)的按你的想法打包在一起。
比如vue，就可以放在單文件里，在團隊中做到組件開發(fā)，甚至各個人寫不同的模板都行。最后使用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" },
        // 轉(zhuǎn)化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"},
        // 圖片轉(zhuǎn)化，小于8K自動轉(zhuǎn)化為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可能對于單頁應(yīng)用的開發(fā)和管理很有幫助，對于簡單的html的開發(fā)，gulp就已經(jīng)綽綽有余了。