欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解webpack+gulp實(shí)現(xiàn)自動(dòng)構(gòu)建部署

 更新時(shí)間:2017年06月29日 15:26:56   作者:sloong  
這篇文章主要介紹了詳解webpack+gulp實(shí)現(xiàn)自動(dòng)構(gòu)建部署,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

webpack系列目錄

webpack 系列 二:webpack 介紹&安裝

webpack 系列 三:webpack 如何集成第三方j(luò)s庫(kù)

webpack 系列 四:webpack 多頁(yè)面支持 & 公共組件單獨(dú)打包

webpack 系列 五:webpack Loaders 模塊加載器

webpack 系列 六:前端項(xiàng)目模板-webpack+gulp實(shí)現(xiàn)自動(dòng)構(gòu)建部署

正文

本篇包含以下三點(diǎn):

1.區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境

2.集成gulp

3.package.json 配置

前面主要介紹了webpack 的一些基礎(chǔ)用法,該篇做一個(gè)整體介紹,如何集成gulp?如何應(yīng)對(duì)多部署環(huán)境?

項(xiàng)目結(jié)構(gòu)說明

 .
 ├── gulpfile.js    # gulp任務(wù)配置
 ├── mock/      # 假數(shù)據(jù)文件
 ├── package.json    # 項(xiàng)目配置
 ├── README.md     # 項(xiàng)目說明
 ├── src      # 源碼目錄
 │ ├── pageA.html    # 入口文件a
 │ ├── pageB.html    # 入口文件b
 │ ├── pageC.html    # 入口文件c
 │ ├── css/     # css資源
 │ ├── img/     # 圖片資源
 │ ├── js     # js&jsx資源
 │ │ ├── pageA.js    # a頁(yè)面入口
 │ │ ├── pageB.js    # b頁(yè)面入口
 │ │ ├── pageC.js    # c頁(yè)面入口
 │ │ ├── helpers/   # 業(yè)務(wù)相關(guān)的輔助工具
 │ │ ├── lib/    # 沒有存放在npm的第三方庫(kù)或者下載存放到本地的基礎(chǔ)庫(kù),如jQuery、Zepto等
 │ │ └── utils/   # 業(yè)務(wù)無關(guān)的輔助工具
 │ ├── scss/     # scss資源
 │ ├── pathmap.json   # 手動(dòng)配置某些模塊的路徑,可以加快webpack的編譯速度
 ├── webpack.config.allinone.js # webpack配置
 ├── webpack.config.js   # 正式環(huán)境webpack配置入口
 └── webpack-dev.config.js  # 開發(fā)環(huán)境webpack配置入口

一:區(qū)分 dev環(huán)境 和 生產(chǎn)環(huán)境

重命名 webpack.config.js => webpack.config.allinone.js

內(nèi)容上,新增options參數(shù),利用options.debug 來控制webpack參數(shù),用來區(qū)分開發(fā)和生產(chǎn)環(huán)境。例如開發(fā)環(huán)境不需要混淆和壓縮js文件,但是開發(fā)環(huán)境需要。通過option.debug來區(qū)分選擇相應(yīng)的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})

后續(xù)可以根據(jù)gulp 指令 動(dòng)態(tài)選擇 是開發(fā)環(huán)境還是測(cè)試環(huán)境,具體見gulpfile.js

//用于gulp傳遞參數(shù)
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 完成以下工作:

  1. 代碼檢查
  2. clean操作
  3. run webpack pack
  4. deploy 發(fā)布

安裝gulp

復(fù)制代碼 代碼如下:

$ 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傳遞參數(shù)
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 配置 各個(gè)指令

  1. 啟動(dòng)webpack調(diào)試server: npm run server
  2. 測(cè)試環(huán)境打包: npm run build
  3. 生產(chǎn)環(huán)境打包: npm run build-online
  4. 發(fā)布到測(cè)試環(huán)境: npm run deploy
  5. 發(fā)布到生產(chǎn)環(huán)境: npm run deploy-online

完整package.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"
  }
 }

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論