详解webpack+gulp实现自动构建部署
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了详解webpack+gulp实现自动构建部署,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5580字,纯文字阅读大概需要8分钟。
内容图文
![详解webpack+gulp实现自动构建部署](/upload/InfoBanner/zyjiaocheng/343/40cb6b027b57450cad04e4d1819a5bfa.jpg)
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 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 配置 各个指令
- 启动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" } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的详解webpack+gulp实现自动构建部署全部内容,希望文章能够帮你解决详解webpack+gulp实现自动构建部署所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。