详解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实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
简单的三步vuex入门
May 20 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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 zend解密软件绿色版测试可用
2008/04/14 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
php中上传文件的的解决方案
2018/09/25 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
自我评价如何写好?
2014/01/05 职场文书
岗位聘任书范文
2014/03/29 职场文书
谢师宴家长致辞
2015/07/27 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
公司周年庆寄语
2019/06/21 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
python代码实现扫码关注公众号登录的实战
2021/11/01 Python