詳解webpack+gulp實(shí)現(xiàn)自動(dòng)構(gòu)建部署
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 完成以下工作:
- 代碼檢查
- clean操作
- run webpack pack
- deploy 發(fā)布
安裝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傳遞參數(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è)指令
- 啟動(dòng)webpack調(diào)試server: npm run server
- 測(cè)試環(huán)境打包: npm run build
- 生產(chǎn)環(huán)境打包: npm run build-online
- 發(fā)布到測(cè)試環(huán)境: npm run deploy
- 發(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)文章
JavaScript實(shí)現(xiàn)相冊(cè)彈窗功能(zepto.js)
這篇文章主要介紹了JavaScript基于zepto.js實(shí)現(xiàn)相冊(cè)彈窗功能的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06使用BroadcastChannel進(jìn)行跨窗口通信的實(shí)例詳解
BroadcastChannel 提供了一種簡(jiǎn)單而有效的方式來實(shí)現(xiàn)同一瀏覽器環(huán)境下不同頁(yè)面或腳本之間的通信,對(duì)于需要跨窗口、標(biāo)簽頁(yè)或 iframe 同步數(shù)據(jù)的應(yīng)用場(chǎng)景,它是一種非常便捷的解決方案,本文介紹了如何使用 BroadcastChannel 進(jìn)行跨窗口通信,需要的朋友可以參考下2024-08-08JavaScript動(dòng)態(tài)改變div屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)改變div屬性的實(shí)現(xiàn)方法,涉及javascript操作頁(yè)面div元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動(dòng)態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-0530分鐘快速實(shí)現(xiàn)小程序語音識(shí)別功能
最近需要在小程序上實(shí)現(xiàn)語音識(shí)別,將需要用到的功能都總結(jié)下,供大家參考。語音識(shí)別用的是科大訊飛,文中給出了詳細(xì)的實(shí)現(xiàn)方法介紹,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11javascript 實(shí)現(xiàn)子父窗體互相傳值的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript 實(shí)現(xiàn)子父窗體互相傳值的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02JavaScript中三種非破壞性處理數(shù)組的方法比較
在這篇文章中,我們將會(huì)探索處理數(shù)組的三種方法:for…of循環(huán)、數(shù)組方法.reduce()和數(shù)組方法.flatMap(),文中的示例代碼講解詳細(xì),感興趣的可以了解一下2023-06-06Javascript獲取數(shù)組中的最大值和最小值的方法匯總
比較數(shù)組中數(shù)值的大小是比較常見的操作,下面同本文給大家分享四種放哪廣發(fā)獲取數(shù)組中最大值和最小值,對(duì)此感興趣的朋友一起學(xué)習(xí)吧2016-01-01