利用Gulp優化部署Web項目[長文慎入]

時間 2019-11-15

標籤利用 gulp 優化部署 web 項目長文慎入欄目 JavaScript 简体版

原文原文鏈接

Gulp

Gulp是一款項目自動化的構建工具，與Grunt同樣能夠經過建立任務（Task）來幫助咱們自動完成一些工做流的內容。固然，今天咱們的內容並非討論這兩者的區別，僅僅是介紹介紹如何利用Gulp來優化咱們的Web項目中前端自動化工做流。javascript

引言

相信很多人看過百度大牛張雲龍的那篇講解大公司裏怎樣開發和部署前端代碼?的文章，若是沒有閱讀的朋友請戳。因爲在項目部署時，咱們須要對項目js，css,image等文件進行壓縮，合併處理，從而減小客戶端對服務Http請求，已達到加強頁面的加載速度，優化服務器帶寬壓力等等目的。因此本文主要講的是利用Gulp優化咱們Web部署優化工做。css

安裝&初始化

首先你得確保你的電腦上面是否已經安裝了Nodejs, 若是沒有安裝的話，那麼請移步。假定有以下一個Nodejs的Web項目（固然你也能夠是其餘的例如Java，.Net的Web項目，且具體開發目錄以下：html

|- project
    |- src // 前端項目的源文件
        |- js 
        |- html
        |- images
        |- css
        |- bower_component // bower 前端依賴包管理
        |- node_component // nodejs 插件
    |- server
        |- api
        |- views
            |- app
        |- assets // 前端靜態文件存放目錄
            |- js
            |- css
            |- images
            |- templates
        |- ... // 其餘目錄就不一一列出了

src文件夾爲前端的js，css, html, image的開發目錄, 咱們會經過gulp將這些源文件進行壓縮合並後打包到目標目錄，也就是assets目錄下相應的js,css目錄，html視圖文件會打包到views下的app文件夾和assets下的templates模板文件夾，具體視狀況而定。其中的bower_component爲bower前端包管理，咱們能夠用bower直接下載幾乎任何咱們前端平常所需的庫，框架,並且能夠任選版本，例如JQuery,Bootstrap,Angular，只需執行bower install packageName便可，不一樣版本只需bower install packageName#version,更多內容，能夠去官網自行查閱，這裏就不展開了。至於node_component 文件夾便是用npm安裝的咱們打包會用到的插件資源了。前端

全局安裝Gulpjava
```
$ npm install --global gulp
```
安裝Gulp到開發項目中node
```
$ npm install --save-dev gulp
```
在src建立gulpfile.js文件，這個文件用來配置咱們所需的task,接下來會具體講解。jquery
執行git
```
$ gulp 
或者
$ gulp taskName
```
gulp會執行gulpfile.js文件下定義的default任務，若是咱們須要執行特定的task，則須要執行下面的命令github

gulpfile.js文件

gulpfile.js用來定義咱們須要自動化的任務，裏面包含了不少依賴關係。這裏咱們會建立4個Task，第一個develop task,用於開發時使用，另外一個release task,用於部署發佈時用的，還有一個watch task, 用於實時監聽文件修改行爲，可及時打包，最後一個default task, gulp默認執行的task.npm

建立Default Task

var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here }); // 若是默認狀況下咱們會執行一個叫develop的task，則這麼寫，執行gulp命令時， // 會自動調用develop gulp.task('default', ['develop']);

建立Develop Task

建立`develop task`前，先介紹下咱們今天要用到的一些插件

gulp-uglify Js壓縮插件
gulp-minify-css Css壓縮插件
gulp-imagemin 圖片壓縮插件，支持格式： PNG, JPEG, GIF and SVG images
gulp-strip-debug 清除源文件console,debugger代碼
gulp-useref 合併壓縮html文件中的文件

以上列出的插件爲我我的經常使用的一些插件，若是你還有fonts文件的話，也能夠添加進去，gulp有不少其餘或者類似的插件，均可以去google搜索。安裝方法則是正常的npm安裝，能夠戳進官網去查看。

首先咱們須要爲咱們要壓縮的源文件配置路徑以及導入插件，假設咱們bower裏面已有jquery和bootstrap插件，以及其餘源文件目錄，以下：

// 引入插件 var uglify = require('gulp-uglify'); // 壓縮 var minifyCss = require('gulp-minify-css'); var stripDebug = require('gulp-strip-debug'); // 該插件用來去掉console和debugger語句 var useref = require('gulp-useref'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); // 任務處理的文件路徑配置 var paths = { js: [ // js目錄 'app/*' ], css: [ 'css/*' ], img: [ 'images/*' ], html: [ 'html/*' ], lib: { // 第三方依賴文件 js: [ 'bower_components/bootstrap/dist/js/bootstrap.js', 'bower_components/jquery/jquery.js' ], css: [ 'bower_components/bootstrap/dist/css/bootstrap.css' ], img: [ 'bower_components/bootstrap/dist/images/*' ] } };

定義`develop task`

var output = "../server/assets/"; // output /* 開發環境 */ gulp.task('develop', function() { gulp.src(paths.js) .pipe(gulp.dest(output + '/js')); gulp.src(paths.lib.js) .pipe(gulp.dest(output + '/js')); gulp.src(paths.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.lib.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.img) .pipe(gulp.dest(output + '/images')); gulp.src(paths.lib.img) .pipe(gulp.dest(output + '/images')); });

上面的develop task直接將代碼都輸出到了咱們的server目錄下，並未經過插件進行相應的處理，主要是由於咱們等會還會建立release task，當真正部署的時候咱們才進行壓縮合並這些處理。

定義`release task`

/* 部署環境 */ gulp.task('release', function() { gulp.src(paths.js) .pipe(stripDebug()) .pipe(gulp.dest(output + '/js')); gulp.src(paths.lib.js) .pipe(stripDebug()) .pipe(gulp.dest(output + '/js')); gulp.src(paths.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.lib.css) .pipe(gulp.dest(output + '/css')); gulp.src(paths.img) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })) .pipe(gulp.dest(output + '/images')); gulp.src(paths.lib.img) .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })) .pipe(gulp.dest(output + '/images')); var assets = useref.assets(); gulp.src(paths.html) .pipe(assets) .pipe(gulpif('*.js', uglify())) .pipe(gulpif('*.css', minifyCss())) .pipe(assets.restore()) .pipe(useref()) .pipe(gulp.dest(output + '/templates')); });

上面的代碼首先是先打包靜態文件到指定包，去掉多餘的console,debugger,給圖片文件進行壓縮處理，最後利用useref插件對ejs視圖文件中的js,css進行壓縮合並處理，並打包到指定目錄。

利用`useref`對html內部的文件進行壓縮合並

上面的release中咱們以及定義了對app目錄下html文件內部的js，css進行壓縮何須，僅僅配置task是還不夠的，我還須要在html內部作以下配置：

<html> <head> <!-- build:css css/main.css --> <link href="css/style.css" rel="stylesheet"> <link href="css/bootstrap.cs.css" rel="stylesheet"> <!-- endbuild --> </head> <body> <!-- build:js scripts/main.js --> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!-- endbuild --> </body> </html>

通過合併後的文件：

<html> <head> <link rel="stylesheet" href="css/main.css"/> </head> <body> <script type="text/javascript" src="js/main.js"></script> </body> </htm>

更多關於gulp-useref的使用方法請戳。

定義`watch Task`

watch task 是爲了監聽文件發生改變後當即觸發的任務，已便於咱們開發。代碼以下：

var watcher = gulp.watch(paths.scripts, ['develop']); watcher.on('change', function (event) { console.log('Event type: ' + event.type); // added, changed, or deleted console.log('Event path: ' + event.path); // The path of the modified file });