2. 程式人生 > >使用npm+gulp+browserify網頁前端開發

使用npm+gulp+browserify網頁前端開發

阿新 • • 發佈：2019-01-22

本文的目的在於使用npm進行js類庫依賴管理，同時精簡html中繁雜的<script>匯入。

目前類庫載入器(如requirejs/seajs等)可以解決script載入的問題。但對依賴處理不好，還需要開發者一個一個去下載js庫，根據個人喜好把js堆砌在專案中。

nodejs中的npm等工具可以很好的處理依賴，但它是為nodejs服務的，它的模組打包格式是CMD，而requirejs是AMD。seajs官方倒是推薦了spm，據說該專案已經終止維護了。

在一定程度上,nodejs的bower外掛可以維護AMD類庫的依賴，但和requirejs合併共處，我一直沒搞明白。

抽時間梳理了一下npm+gulp+browserify的組合，感覺還不錯。npm來管理CMD類庫的依賴，browserify來進行CMD到AMD的轉換，gulp來管理browserify進行自動構建。

構建前是多個js，構建後會把編寫的程式碼js和依賴的類庫打包為一個js檔案。這樣，html中只需要匯入一個js檔案就可以了。

注：這裡沒有類載入器的事。

準備環境

從一個裸centos開始。

[vagrant@bogon ~]$ cat /etc/redhat-release
CentOS release 6.7 (Final)
[vagrant@bogon ~]$ which node
/usr/bin/which: no node in (/usr/local/bin:/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/sbin:/home/vagrant/bin)

安裝nodejs

不要使用yum裝nodejs，epel中的版本太低，而其他倉庫的拉取速度太慢。

[vagrant@bogon myweb]$ npm -v
1.3.6
[vagrant@bogon myweb]$ node -v
v0.10.46

目前npm已經4.1.1了， 而nodejs版本都已經6.9.2 LTS/7.3.0 latest了。

推薦使用淘寶映象站的安裝包。

#需要root
# sudo -i
# yum install -y perl
# cd /opt
# wget https://npm.taobao.org/mirrors/node/v6.9.2/node-v6.9.2.tar.gz
 


# tar xvfz node-v6.9.2.tar.gz
# ln /opt/node-v6.9.2-linux-x64/bin/node /usr/bin/node
# cd /opt/node-v6.9.2-linux-x64/lib/node_modules/npm
# make && make install

使用淘寶cnpm加速npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

到現在為止，你完全可以用cnpm代替npm，當然如果你的npm速度夠快也可以不用考慮。

安裝全域性外掛

gulp建議安裝到全域性，這樣可以通過命令列gulp執行。如果安裝到專案，就需要使用路徑訪問，如：node ./node_modules/gulp/bin/gulp.js

$ sudo cnpm install -g gulp
$ sudo gulp -v
[08:05:11] CLI version 3.9.1
[08:05:11] Local version 3.9.1

我用虛擬機器測試，在宿主機器上訪問方便，安裝一下http-server。

$ sudo cnpm install -g http-server

前端開發

建立專案

$ mkdir ~/myweb
$ cd ~/myweb
$ cnpm init

一路回車，預設就可以了。實際開發中輸入自己的專案資訊。

安裝js依賴

jquery很常用，就以它為例。

$ npm install jquery@1.12.4

這時候檔案就在專案目錄的node_modules中了。目前目錄結構如下：

$ tree node_modules -L 2
node_modules
└── jquery
    ├── AUTHORS.txt
    ├── bower.json
    ├── dist
    ├── external
    ├── LICENSE.txt
    ├── package.json
    ├── README.md
    └── src

這時候在node_modules/jquery/dist已經有jquery.min.js了。

在專案目錄建立index.html測試一下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div id="div1">
  123
</div>
<button id="edit">修改</button>
<script type="text/javascript">
  $(function(){
    $("#edit").on("click",function(){
      $("#div1").text("abc");
    });
  });
</script>
</body>
</html>

啟動http-server:

[[email protected] myweb]$ http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://10.0.2.15:8080
  http://192.168.33.11:8080

它自動以當前目錄為webroot啟動一個簡單的web服務。

訪問網址測試正常與否：http://192.168.33.11:8080/index.html

這樣可以了嗎？這不是本文的目的，如果需要使用多個js類庫，還是有很多的<script src="balaba.js"/>。

安裝browserify

如果單獨使用browserify,應該安裝在全域性。

$ sudo cnpm install -g browserify

專案結構調整

構建過程中，原始碼在src中，構建後會儲存到dist中，html實際引入的是dist的。考慮程式碼保護，我們可能還要對js等資源混淆，所以不應該把src目錄暴漏在webroot中。

本例專案結構採用maven工程格式，考慮約定俗成的習慣，構建結果儲存到$webroot/js中：

[vagrant@bogon myweb]$ tree src
src
└── main
    ├── nodejs
    └── webapp
        └── js

編寫示例

src/main/webapp/index.html

仍然使用之前的例子，將123改為abc,現在把程式碼單獨從js/index.js中引入。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/index.js" charset="utf-8"></script>
</head>
<body>
<div class="container" id="div1">
  123
</div>
<button id="edit">修改</button>

</body>
</html>

src/main/nodejs/index.js

注意: 此index.js非彼index.js。

var $ = require("jquery");
$(function(){
  $("#edit").on("click",function(){
    $("#div1").text("abc");
  });
});

有疑問了，jquery在哪裡？管他呢，browserify知道就行了。

browserify轉換

browserify src/main/nodejs/index.js -o src/main/webapp/js/index.js

測試

cd src/main/webapp
http-server

注意，專案結構變了，執行http-server要進入webroot目錄。

gulp自動構建

每一次編輯js都手動呼叫browserify不現實，我們可以使用gulp進行自動構建。

建立gulpfile.js

var gulp = require("gulp");
var watch = require("gulp-watch");
var browserify = require("browserify");
var sourcemaps = require("gulp-sourcemaps");
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task("browserify", function () {
 var b = browserify({
  entries: "./src/main/nodejs/index.js",
  debug: true
 });

 return b.bundle()
  .pipe(source("index.js"))
  .pipe(buffer())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write("."))
  .pipe(gulp.dest("./src/main/webapp/js"));
});

gulp.task("watch",function(){
  gulp.watch("./src/main/nodejs/index.js",["browserify"]);
});

安裝gulp的外掛

cnpm install browserify
cnpm install gulp
cnpm install gulp-watch
cnpm install gulp-sourcemaps
cnpm install vinyl-source-stream
cnpm install vinyl-buffer
cnpm install debug-fabulous
cnpm install debug
cnpm install css

測試gulp任務

gulp browserify

啟動gulp監聽程序

gulp會監聽”./src/main/nodejs/index.js”的變化，然後指定”browserify”任務。

$ sudo gulp watch
[09:37:00] Using gulpfile /home/vagrant/myweb/gulpfile.js
[09:37:00] Starting 'watch'...
[09:37:00] Finished 'watch' after 8.91 ms

這時候可以回到eclipse編輯程式碼，一旦修改了”./src/main/nodejs/index.js”就會自動構建，重新整理頁面就看到效果了。

[[email protected] myweb]$ sudo gulp watch
[09:37:00] Using gulpfile /home/vagrant/myweb/gulpfile.js
[09:37:00] Starting 'watch'...
[09:37:00] Finished 'watch' after 8.91 ms
[09:38:34] Starting 'browserify'...
[09:38:35] Finished 'browserify' after 740 ms

gulp監聽到09:38:34檔案被編輯了，即刻構建。

gulp繫結多個檔案

如果構建的js很多，gulp檔案會很大。

增加外掛：

cnpm install gulp-rename
cnpm install event-stream

修改gulpfile.js

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var browserify = require('browserify');
var es = require('event-stream');

gulp.task('browserify', function(){
    //定義多個入口檔案
    var entityFiles = [
        './src/main/nodejs/index.js',
        './src/main/nodejs/a.js',
    ];

    //遍歷對映這些入口檔案
    var tasks = entityFiles.map(function(entity){
        return browserify({entries: [entry]})
            .bundle()
            .pipe(source(entry))
            .pipe(rename({
                extname: '.bundle.js',
                dirname: ''
            }))
            .pipe(gulp.dest('./src/main/webapp/js'));
    });

    //建立一個合併流
    return es.merge.apply(null, tasks);
});

gulp.task("watch",function(){
  gulp.watch("./src/main/nodejs/*.js",["browserify"]);
});

檔名會修改為index.bundle.js，可以寫多個檔案。

繫結任意多個檔案

增加外掛：

cnpm install glob

修改gulp

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var browserify = require('browserify');
var es = require('event-stream');
var glob = require('glob');

gulp.task('browserify', function(done){
    glob('./src/main/nodejs/*.js', function(err, files) {
        if(err) done(err);

        var tasks = files.map(function(entry) {
            return browserify({ entries: [entry] })
                .bundle()
                .pipe(source(entry))
                .pipe(rename({
                    extname: '.bundle.js',
                    dirname: ''
                }))
                .pipe(gulp.dest('./src/main/webapp/js'));
            });
        es.merge(tasks).on('end', done);
    })
});

gulp.task("watch",function(){
  gulp.watch("./src/main/nodejs/*.js",["browserify"]);
});

完美~

Final

gulp很強大，外掛太多，這裡只是冰山一角，以後有時間梳理一下gulp。

寫到這裡發現sudo執行gulp時生成的檔案有許可權問題，先mark以後再調整吧。

相關推薦

使用npm+gulp+browserify網頁前端開發

本文的目的在於使用npm進行js類庫依賴管理，同時精簡html中繁雜的<script>匯入。 目前類庫載入器(如requirejs/seajs等)可以解決script載入的問題。但對依賴處理不好，還需要開發者一個一個去下載js庫，根據個人喜好把js

網頁設計師和網頁前端開發我該選擇哪一個

在互聯網歷史中，網頁設計師和網頁開發人員這兩個不同的行業分工一直都扮演著不可或缺的角色。誰是主角，誰是配角的爭論就如雞和蛋誰先誰後的爭論一樣，喋喋不休卻沒有意義。但是，如果從客觀的角度來講，那麽你有必要了解網頁設計師和網頁開發者之間的區別和聯系；如果從職業規劃的角度來說，那麽你更應該好好看看這篇文章，再

EOS Dapp最後一環--scatter網頁前端開發實踐

 我們知道自從移動錢包(TokenPocket,MeetOne, 麥子錢包, EosToken)支援scatter後，Eos Dapp的體驗及便利性提升了少，也是最近Dapp爆熱的一個原因，因而目前Eos Dapp支援Scatter是一個必選項。同時，最近很多夥伴問我Dapp

前端開發中提到的“腳手架”到底指什麼，CLI？gulp 和 gulp-cli有什麼區別

一般來說，腳手架是幫你減少「為減少重複性工作而做的重複性工作」的工具. gulp和gulp-cli的區別可以看這個task - what does gulp-"cli" stands for? . 它跟前端常說的腳手架（scaffold）不是一個東西. CLI只是Command Line Interface

前端開發總結之gulp

                                          &nb

提高前端開發效率--讓網頁自動重新整理

做前端開發的肯定無數次地在重複以下流程： 程式碼編輯器中修改程式碼-儲存-切換到瀏覽器-F5重新整理 部分IDE和編輯器中可以通過安裝外掛實現實時重新整理的效果，但是如果不想安裝那麼多東西怎麼辦？ 可以通過在html的head部分中加入以下程式碼實現瀏覽器自動重新整理： <script

nodejs+angularjs+npm+gulp+bower+jade+less構建前端框架

名詞解釋 nodejs:nodejs是這個框架的基礎，nodejs可以理解成js直譯器，相對於Python語言而言，以前執行js程式碼必須使用瀏覽器，現在就可以使用nodejs，nodejs還擴充了js語言，編寫了包括檔案，網路，程序管理在內的許多模組。 angularjs:angu

關於網頁隨手機比例縮放的問題。。。 移動前端開發之viewport的深入理解

在做適配手機版時，chrome調到手機版，但是還是顯示PC端的樣式，無法展現出手機端的樣式； 開始的時候還以為是chrome版本的問題，搜尋chrome版本無果； 想了下，按照道理chrome版本越新，功能應該更好用才是。 聯網搜尋並檢視一些手機版網頁的原始碼，發現很多大網站的手機版都有如下一句話：

基於gulp編寫的一個簡單實用的前端開發環境

自從Node.js出現以來，基於其的前端開發的工具框架也越來越多了，從Grunt到Gulp再到現在很火的WebPack，所有的這些新的東西的出現都極大的解放了我們在前端領域的開發，作為一個在前端領域裡打滾了兩年的文藝小碼農來說，也有自己的一些體會，今天就來分享一下自己基於

Web前端開發學習1：靜態網頁

       一靜態網頁概述        在網站設計中，純粹HTML（標準通用標記語言下的一個應用）格式的網頁通常被稱為“靜態網頁”，靜態網頁是 標準的HTML檔案，它的副檔名是.htm、.html

前端開發工具：gulp常用指令以及操作

gulp使用： 1.建立專案; 2.開啟cmd,進入專案目錄; 3.新建package.json檔案,指令cnpm init。如果沒有出錯，可能不存在cnpm指令, 可以通過指令npm install cnpm -g --registry=https://reg

使用NPM + Webpack進行前端開發的示例

最近在使用Webpack來幫助進行前端開發，覺得這個東西的確挺好用。所以用一個簡單的示例記錄一下，供他人以及自己以後的參考。 這篇文章不是Webpack的教程貼，也不分析Webpack的優缺點，只是簡單的記錄我自己覺得還不錯的一套用法，在閱讀本文前，讀者需要對NPM以及We

【前端開發】25種提高網頁載入速度的方法和技巧

尊重原創：http://blog.csdn.net/wxzking/article/details/4089384 您希望加快網頁的載入速度嗎？瞭解如何通過縮短載入時間來改善撥號上網使用者的瀏覽體驗，在某些情形下，載入時間最多可縮短 80%。下面介紹二十五中網速方法和

談談關於前端開發網頁適配手機的相關設定

雖然說本人是做前端開發的,但是也開發過幾個Android專案,還是比較關注移動端的,個人感覺以後用網頁開發手機App是一種趨勢,h5的興起也正說明了這一點,也正是有了h5,讓前端開發者也能開發手機,好了,廢話不多說,進入正題,對網頁的適配手機本人暫時用到了3中方

自學前端開發:模擬Array功能 不是擴展子類

自學 下使用 .cn 解決 shift this var 擴展 method function MyArray(){};//創建模擬數組功能的構造函數 MyArray.prototype.length=0;//解決IE下使用擴展子類

前端開發中的JS調試技巧

pre 整潔 選擇 輸入 越來越大 代碼執行 auto move ctr 前言：調試技巧，在任何一項技術研發中都可謂是必不可少的技能。掌握各種調試技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。而在互聯網前端開發越來越重要的今

自學前端開發 新版css時鐘效果圖

mat absolute ont poi dbo .cn second 交流 meta 想要自學前端開發，你要的學習資料到了-web前端交流學習群21，新版css時鐘效果圖 <!DOCTYPE html> <html> <he

前端開發100元/頁，空心科技切入IT人才共享

項目 服務費 流程 標準化 綜合 之前 基本 上推 htm 共享經濟的風口，IT人才如何共享？ 空心科技前端人才共享平臺 滴滴、摩拜、airbnb等共享經濟大火的背景下，區別於產品流通共享的人才領域共享如何實現？ 豬八戒新一輪26億、一品威客C輪、兼職貓A輪6300萬、

進行獨立於後臺後端的前端開發——學習Mockjs

lis 返回值 大於等於 con 函數 ddl -m sca 註意 Mockjs實現的功能 1.讓前端攻城師獨立於後端進行開發。 2.通過隨機數據，模擬各種場景。增加單元測試的真實性 3.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。 4.用法簡單 5

web端設計和web前端開發 的區別

mage ima cnblogs 前端開發 src web前端開發 log alt .cn web端設計和web前端開發 的區別