生活記事簿: 將網頁要引入的前端套件Code再到網頁中

2017年5月14日星期日

將網頁要引入的前端套件Code再到網頁中 - bower + gulp + wiredep + gulp-inject

bower可以很方便的下載安裝前端套件(JS、CSS等)，而這些下載下來的套件可以利用
gulp-inject及wiredep配合gulp來執行自動化工作，把要用的套件引入程式碼加到網頁檔案的(html, jsp等)。

以下提供一個使用的範例，用到的有(當然要先裝node.js)：

bower ：用來管理前端套件(JS、CSS等)。
gulp ：用來執行自動化工作（task）。
gulp-inject ：gulp的外掛之一，可以用來將JS、CSS的引入Code寫到網頁檔案中。
例如html中的 <script src=“xxx.js"></script>
wiredep：跟gulp-inject一樣，不過是用來將bower安裝的套件引入Code寫到網頁當案中，會自動偵測被引入套件中的bower.json來獲知要引入的JS、CSS等，可以直接寫Code用node.js執行，也有提供gulp的使用方式。

安裝node.js後，進行以下步驟：

首先先來安裝bower、gulp到命令列模式打上指令進行全域安裝。
```
node install bower -g
```
```
node install gulp -g
```
接著再到已建立的專案的專案路徑下，用以下指令建立一個package.json來管理此專案用node.js安裝的套件(之後可以直接用node install安裝回全部要的套件)。
```
node init
```
接著再到已建立的專案的專案路徑下執行gulp、gulp-inject、wiredep的安裝(非全域，只是當下專案會用到，但因為之後要寫require("gulp")的語法，所以gulp要在專案下再安裝一次)，使用--save-dev來寫入到package.json的devDependencies(表示開發用)中。
```
node install gulp --save-dev
```
```
node install gulp-inject --save-dev
```
```
node install wiredep --save-dev
```
使用以下指令建立一個bower.json來管理此專案用bower安裝的套件(之後可以直接用bower install安裝回全部要的套件)。
```
bower init
```
接著使用bower來安裝前端套件，例如angularJS、angular-fancy-modal
```
bower install angular --save
```
```
bower install angular-fancy-modal --save
```
安裝好的套件預設會被放到bower_components資料夾中。
建立一個網頁(index.html)、一個JS檔案、一個CSS檔案做測試，
然後再建立一個檔名為gulpfile.js的檔案，裡面會寫上gulp的自動化工作，
現在的檔案結構應該會例如像下面這樣：

先在index.html寫下以下程式碼，其中，
bower:css、bower:js和endbower是用來告訴wiredep要在哪加進JS、CSS引入程式碼。
inject:css、inject:js和endinject是用來告訴gulp-inject要在哪加進JS、CSS引入程式碼。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- bower:css -->
        <!-- endbower -->
        
        <!-- bower:js -->
        <!-- endbower -->
        
        <!-- inject:css -->
        <!-- endinject -->
        
        <!-- inject:js -->
        <!-- endinject -->
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

接著在gulpfile.js裡寫下如下程式碼：

var gulp = require("gulp");
var wiredep = require("wiredep").stream;  //wiredep提供給gulp使用的方式，使用stream來讓gulp能使用wiredep
var gulpInjct = require("gulp-inject");

//設定gulp工作(task)
gulp.task("injectScriptCssTask", function () {
  //用wiredep來在index.html加入從bower install來的JS、CSS套件
  //Use wiredep to inject script, css installed by bower.
  gulp.src("index.html").pipe(wiredep({
                            optional : "configuration",
                            goes : "here"
                         }))    
  //用gulp-inject來在index.html加入自已指定的JS、CSS套件
  //Use gulp-inject to inject our own script, css.  
                        .pipe(gulpInjct(gulp.src(['./app/**/*.js', './app/**/*.css'],
                                                 {read : false}  //因為不用讀取JS、CSS檔的內容，只是想知道它們的path，
                                                                //所以設定 {read : false} 增進效能
                                                ),
                                        {relative : true}))  //設置{relative : true}指定用相對如徑的方式來寫入引人程式碼 
                        .pipe(gulp.dest("."));
});

最後使用命令列視窗，到專案目錄執行gulp的工作(此例工作名稱為injectScriptCssTask)：

gulp injectScriptCssTask

再到index.html中，應該就可以看到JS、CSS引入碼被成功地寫入到檔案中了：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- bower:css -->
        <link rel="stylesheet" href="bower_components/angular-fancy-modal/dist/angular-fancy-modal.css" />
        <!-- endbower -->
        
        <!-- bower:js -->
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-fancy-modal/dist/angular-fancy-modal.js"></script>
        <!-- endbower -->
        
        <!-- inject:css -->
        <link rel="stylesheet" href="app/css/main.css">
        <!-- endinject -->
        
        <!-- inject:js -->
        <script src="app/js/app.js"></script>
        <!-- endinject -->
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

原始碼下載：
AngularJsUI-RouterTest.7z

參考資料：

生活記事簿

2017年5月14日星期日

將網頁要引入的前端套件Code再到網頁中 - bower + gulp + wiredep + gulp-inject

沒有留言 :

張貼留言

2017年5月14日 星期日

將網頁要引入的前端套件Code再到網頁中 - bower + gulp + wiredep + gulp-inject

沒有留言 :

張貼留言

2017年5月14日星期日