webpack+gulp实现自动构建部署

resolution

项目结构说明   ├── 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"
      }
    }

resolution

## 开发要求 ##

约定/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

cheas3.0

不错 顶一下