详解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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
bootstrap table实例详解
Jan 06 Javascript
js实现消息滚动效果
Jan 18 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php随机输出名人名言的代码
2012/10/07 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
肯尼迪就职演说稿
2013/12/31 职场文书
环保宣传标语
2014/06/12 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
董事长新年致辞
2015/07/29 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python