webpack+gulp實現自動構建部署

時間 2019-11-15

標籤 webpack+gulp webpack gulp 實現自動構建部署欄目 JavaScript 简体版

原文原文鏈接

Webpack webpack+gulp實現自動構建部署

webpack系列目錄css

基於webpack搭建純靜態頁面型前端工程解決方案模板，最終形態源碼見github: https://github.com/ifengkou/webpack-templatehtml

正文

本篇包含如下三點：前端

區分開發環境和生產環境
集成gulp
package.json 配置

前面主要介紹了webpack 的一些基礎用法，該篇作一個總體介紹，如何集成gulp？如何應對多部署環境？node

項目結構說明

.
    ├── 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：webpack

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.jsgit

//用於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 完成如下工做：github

代碼檢查
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 以下：web

/**
 * 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 code
gulp.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 asserts
gulp.task('clean', ['hint'], function () {
    var clean = require('gulp-clean');
    return gulp.src(assets, {read: true}).pipe(clean())
});

//run webpack pack
gulp.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 task
gulp.task('default', ['pack'])

//deploy assets to remote server
gulp.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 配置各個指令npm

啓動webpack調試server： npm run server
測試環境打包: npm run build
生產環境打包: npm run build-online
發佈到測試環境: npm run deploy
發佈到生產環境: npm run deploy-online

完整package.json 以下：json

{
      "name": "webpack-avalon",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "server": "webpack-dev-server --inline",
        "build": "gulp pack --env debug",
        "build-online": "gulp pack --env production",
        "deploy": "gulp deploy --env debug",
        "deploy-online": "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"
      }
    }