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 server

测试环境打包: npm build

生产环境打包: npm buildP

发布到测试环境: npm deploy

发布到生产环境: npm deployP

完整package.json 如下：

{
"name": "webpack-avalon",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "webpack-dev-server --inline",
"build": "gulp pack --env debug",
"buildP": "gulp pack --env production",
"deploy": "gulp deploy --env debug",
"deployP": "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"
}
}

开发要求

约定/src/*.html为应用的入口文件，在/src/js/ 一级目录下需有一个同名的js文件作为该文件的入口。

编译（测试/dev环境）

$ npm run build

编译（生产环境）

生产环境会对js混淆压缩，对css、html进行压缩，字符替换等处理

$ npm run buildP

部署发布

在gulpfile.js 中配置好localServer和remoteServer，编译后将dist目录发布到服务端

发布到localServer

$ npm run deploy

发布到remoteServer

$ npm run deployP

本地调试

$ npm run server

# 或者 下面两种模式

$ webpack-dev-server

$ webpack-dev-server --inline

Jenkins 持续集成

需要nodejs

$ npm run buildP
$ npm run deployP