gulp和webpack初探

jhhfft 發布于2019-08-19 18:40 / 877人閱讀

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

首先聲明一下，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就已經綽綽有余了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79858.html

webpack再看一遍

摘要：在終端中使用可以自動創建這個文件輸入這個命令后，終端會問你一系列問題。百度后發現引入了模式，有三個狀態，開發模式生產模式無。什么是webpack，為什么要使用webapck * 導語之前一直忙著項目，沒時間整理自己的東西，最近剛好發現自己對webpack又如此陌生了，于是整理了一篇關于webpack初探的干貨，這里是一點簡單的webpack配置為什么使用webpck 現今很多網頁...

whinc 2019-08-23 14:09 評論0 收藏0
【提高系列】webpack相關知識

摘要：基本配置項基本配置項。的插件架構主要基于實現的，這個就是專注于事件的廣播和操作。開啟多進程，加快打包速度。這次我們主要研究的是webpack框架的相關知識，webpack是一個打包構建的前端框架，用于解決前端開發的模塊化問題。應用場景和縱向比較說到webpack，肯定你還會想到gulp和grunt這些框架，那么webpack是做什么的呢？他和其他的框架有什么區別呢？我們一起來分析...

DirtyMind 2019-08-22 15:18 評論0 收藏0
flint簡單初體驗

摘要：它能夠使得在不刷新瀏覽器的情況下，更改本地的前端代碼組件，瀏覽器自動更新預覽。直接集成了這項技術，而且建立了專門的通道進行錯誤的實時反饋。命令行提供了三個主要的命令，。服務器關于服務器，其實是內部起了一個基于的服務器，外加進行消息的通訊。跟著初探了下flintjs，的確會很棒，超級熱更新！學習地址： http://frontenddev.org/link/ali-11-11-...

Batkid 2019-08-19 17:13 評論0 收藏0
Javascript五十問——從源頭細說Webpack與Gulp

摘要：前言與是目前圈子內比較活躍的前端構建工具。對于初學者來說，對這二者往往容易認識不清，今天，就從事件的源頭，說清楚與。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。打包后形成的文件出口。前言：Webpack 與 gulp是目前圈子內比較活躍的前端構建工具。網上有很多二者比較的文章，面試中也會經常遇到gulp，Webpack的區別這樣的問題。對于初學者來說，對這二...

lwx12525 2019-08-23 14:47 評論0 收藏0