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


Posted in Javascript onJune 29, 2017

webpack系列目录

正文

本篇包含以下三点:

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 完成以下工作:

  1. 代码检查
  2. clean操作
  3. run webpack pack
  4. 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 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 配置 各个指令

  1. 启动webpack调试server: npm run server
  2. 测试环境打包: npm run build
  3. 生产环境打包: npm run build-online
  4. 发布到测试环境: npm run deploy
  5. 发布到生产环境: 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"
  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
原生js实现放大镜
Feb 20 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
bootstrapvalidator之API学习教程
Jun 29 #Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 #Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
详解webpack 多页面/入口支持&公共组件单独打包
Jun 29 #Javascript
详解webpack 如何集成第三方js库
Jun 29 #Javascript
详解webpack介绍&安装&常用命令
Jun 29 #Javascript
基于node.js制作简单爬虫教程
Jun 29 #Javascript
You might like
PHP 模板高级篇总结
2006/12/21 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
Vue中props的详解
2019/05/16 Javascript
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python可视化实现代码
2019/01/15 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
大学迎新标语
2014/06/26 职场文书
工会工作先进事迹
2014/08/18 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记