webpack+gulp實現自動構建部署

標籤：

項目結構說明

    .    ├── gulpfile.js               # gulp任務配置    ├── mock/                     # 假資料檔案    ├── package.json              # 項目配置    ├── README.md                 # 項目說明    ├── src                       # 源碼目錄    │   ├── pageA.html                # 入口檔案a    │   ├── pageB.html                # 入口檔案b    │   ├── pageC.html                # 入口檔案c    │   ├── css/                  # css資源    │   ├── img/                  # 圖片資源    │   ├── js                    # js&jsx資源    │   │   ├── pageA.js              # a頁面入口    │   │   ├── pageB.js              # b頁面入口    │   │   ├── pageC.js              # c頁面入口    │   │   ├── helpers/          # 業務相關的協助工具輔助    │   │   ├── lib/              # 沒有存放在npm的第三方庫或者下載存放到本地的基礎庫，如jQuery、Zepto等    │   │   └── utils/            # 業務無關的協助工具輔助    │   ├── scss/                 # scss資源    │   ├── pathmap.json          # 手動設定某些模組的路徑，可以加快webpack的編譯速度    ├── webpack.config.allinone.js    # webpack配置    ├── webpack.config.js         # 正式環境webpack配置入口    └── webpack-dev.config.js     # 開發環境webpack配置入口

一：區分 dev環境 和 生產環境重新命名 webpack.config.js => webpack.config.allinone.js

內容上，新增options參數，利用options.debug 來控制webpack參數，用來區分開發和生產環境。例如開發環境不需要混淆和壓縮js檔案，但是開發環境需要。通過option.debug來區分選擇相應的loader配置和Plugin：

module.exports = function(options){    options = options || {}    var debug = options.debug !==undefined ? options.debug :true;    ......     if(debug){        //     }else{        //    }

新增webpack.config.js webpack-dev.config.js

//webpack.config.js‘use strict‘;var webpack_config = require(‘./webpack.config.allinone‘)   module.exports = webpack_config({debug:false})//webpack-dev.config.js‘use strict‘;var webpack_config = require(‘./webpack.config.allinone‘)   module.exports = webpack_config({debug:true})

後續可以根據gulp 指令 動態選擇 是開發環境還是測試環境，具體見gulpfile.js

//用於gulp傳遞參數var minimist = require(‘minimist‘);var knownOptions = {    string: ‘env‘,    default: {env: process.env.NODE_ENV || ‘production‘}};var options = minimist(process.argv.slice(2), knownOptions);var webpackConf = require(‘./webpack.config‘);var webpackConfDev = require(‘./webpack-dev.config‘);var _conf = options.env === ‘production‘ ? webpackConf : webpackConfDev;webpack(_conf, function (err, stats) {......

二：整合gulp

利用 gulp 完成以下工作：

• 代碼檢查
• clean操作
• run webpack pack
• deploy 發布

安裝gulp

$ npm install gulp gulp-clean jshint gulp-jshint jshint-stylish gulp-sftp gulp-util minimist --save-dev

新增gulpfile.js

完整gulpfile.js 如下：

/** * Created by sloong on 2016/6/14. */‘use strict‘;var gulp = require(‘gulp‘);var webpack = require(‘webpack‘);//用於gulp傳遞參數var minimist = require(‘minimist‘);var gutil = require(‘gulp-util‘);var src = process.cwd() + ‘/src‘;var assets = process.cwd() + ‘/dist‘;var knownOptions = {    string: ‘env‘,    default: {env: process.env.NODE_ENV || ‘production‘}};var options = minimist(process.argv.slice(2), knownOptions);var webpackConf = require(‘./webpack.config‘);var webpackConfDev = require(‘./webpack-dev.config‘);var remoteServer = {    host: ‘192.168.56.129‘,    remotePath: ‘/data/website/website1‘,    user: ‘root‘,    pass: ‘password‘};var localServer = {    host: ‘192.168.56.130‘,    remotePath: ‘/data/website/website1‘,    user: ‘root‘,    pass: ‘password‘}//check codegulp.task(‘hint‘, function () {    var jshint = require(‘gulp-jshint‘)    var stylish = require(‘jshint-stylish‘)    return gulp.src([        ‘!‘ + src + ‘/js/lib/**/*.js‘,        src + ‘/js/**/*.js‘    ])        .pipe(jshint())        .pipe(jshint.reporter(stylish));})// clean assertsgulp.task(‘clean‘, [‘hint‘], function () {    var clean = require(‘gulp-clean‘);    return gulp.src(assets, {read: true}).pipe(clean())});//run webpack packgulp.task(‘pack‘, [‘clean‘], function (done) {    var _conf = options.env === ‘production‘ ? webpackConf : webpackConfDev;    webpack(_conf, function (err, stats) {        if (err) throw new gutil.PluginError(‘webpack‘, err)        gutil.log(‘[webpack]‘, stats.toString({colors: true}))        done()    });});//default taskgulp.task(‘default‘, [‘pack‘])//deploy assets to remote servergulp.task(‘deploy‘, function () {    var sftp = require(‘gulp-sftp‘);    var _conf = options.env === ‘production‘ ? remoteServer : localServer;    return gulp.src(assets + ‘/**‘)        .pipe(sftp(_conf))})

三：package.json 配置

scripts 配置 各個指令

• 啟動webpack調試server： npm server
• 測試環境打包: npm build
• 生產環境打包: npm buildP
• 發布到測試環境: npm deploy
• 發布到生產環境: npm deployP

完整package.json 如下：

    {      "name": "webpack-avalon",      "version": "1.0.0",      "description": "",      "main": "index.js",      "scripts": {        "server": "webpack-dev-server --inline",        "build": "gulp pack --env debug",        "buildP": "gulp pack --env production",        "deploy": "gulp deploy --env debug",        "deployP": "gulp deploy --env production"      },      "author": "sloong",      "license": "MIT",      "devDependencies": {        "css-loader": "^0.21.0",        "ejs-loader": "^0.3.0",        "extract-text-webpack-plugin": "^1.0.1",        "file-loader": "^0.8.5",        "gulp": "^3.9.1",        "gulp-clean": "^0.3.2",        "gulp-jshint": "^2.0.1",        "gulp-sftp": "^0.1.5",        "gulp-util": "^3.0.7",        "html-loader": "^0.4.3",        "html-webpack-plugin": "^2.19.0",        "jshint": "^2.9.2",        "jshint-stylish": "^2.2.0",        "jsx-loader": "^0.13.2",        "minimist": "^1.2.0",        "node-sass": "^3.7.0",        "sass-loader": "^3.2.0",        "style-loader": "^0.13.0",        "url-loader": "^0.5.7",        "webpack": "^1.13.1",        "webpack-dev-server": "^1.14.1"      }    }

## 開發要求 ##

 

約定/src/*.html為應用的入口檔案，在/src/js/ 一級目錄下需有一個同名的js檔案作為該檔案的入口。

 

## 編譯（測試/dev環境） ##

 

    $ npm run build

 

## 編譯（生產環境） ##

 

生產環境會對js混淆壓縮，對css、html進行壓縮，字元替換等處理

 

    $ npm run buildP

 

## 部署發布 ##

 

在gulpfile.js 中配置好localServer和remoteServer，編譯後將dist目錄發布到服務端

 

發布到localServer

 

    $ npm run deploy

 

發布到remoteServer

 

    $ npm run deployP

 

## 本地調試 ##

 

    $ npm run server

    # 或者 下面兩種模式

    $ webpack-dev-server

    $ webpack-dev-server --inline

 

## Jenkins 持續整合 ##

 

    需要nodejs

    $ npm run buildP

    $ npm run deployP

 

webpack+gulp實現自動構建部署