详解webpack+gulp实现自动构建部署

2019-11-19 16:13:09

字体：大中小

来源：转载

供稿：网友

webpack系列目录

webpack 系列二：webpack 介绍&安装

webpack 系列三：webpack 如何集成第三方js库

webpack 系列四：webpack 多页面支持 & 公共组件单独打包

webpack 系列五：webpack Loaders 模块加载器

webpack 系列六：前端项目模板-webpack+gulp实现自动构建部署

正文

本篇包含以下三点：

1.区分开发环境和生产环境

2.集成gulp

3.package.json 配置

前面主要介绍了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 run server
测试环境打包: npm run build
生产环境打包: npm run build-online
发布到测试环境: npm run deploy
发布到生产环境: 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"  } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：常见的浏览器Hack技巧整理

下一篇：bootstrapvalidator之API学习教程