详解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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
js+css实现红包雨效果
Jul 12 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 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开发者的10个技巧
2011/02/25 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php多重接口的实现方法
2015/06/20 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
jquery简单体验
2007/01/10 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
js简易版购物车功能
2017/06/17 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python中logging实例讲解
2019/01/17 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Django-imagekit的使用详解
2020/07/06 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
python中xlrd模块的使用详解
2021/02/01 Python
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
小车司机岗位职责
2013/11/25 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
个人事迹材料范文
2014/12/29 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
酒店开业主持词
2015/07/02 职场文书
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL