前端工程构建的一些微小的配置

为什么

懒

是不是

不是

用到的一些东西

目前公司前端工程始于kt-wechat这个项目，也就是一个公众号网页，里面大概有一些奇奇怪怪的微信接口，反正功能还是比较全面的。 微信打开http://wechat.ktfootball.com就可以看到。
现有的技术选型都是建立在小且稳健，能够小步快走的模式，才能应对拍脑袋产生的需求。所以开始我们的项目是简单的一个目录结构，一个标准的express模板，然后加上mithril, 打包也用上了很潮的webpack，然后在官方教程里面写了两个npm script，就可以稳健的开发了。

"scripts": {
    "start": "node bin/www",
    "watch": "webpack -d --watch"
    "watch": "webpack -p"
  },

在这里再次申明，express是因为有个generator可以用，而且express也只是作为一个container，用来和微信的接口做一些授权什么的，前端的express中基本上是不存在什么逻辑的。所以本质上我只需要一个 index.html 文件就可以了。

Webpack

这里加上图片是因为显得内容比较丰富。

这是是0.1版本的时候的构建流程，

dev npm run watch, 写代码， Git， 然后 rsync
prod Git, npm run build， 然后 rsync

后来多了一个小伙伴写代码，他是windows的机器，所以就出现了

dev npm run watch, 写代码， Git， 然后 scp
prod Git, npm run build， 然后 scp

所以项目下面有了两个，三个sh文件，分别叫做 sync, winsync, winsync_dev。是不是很酷。

截止到我写这篇文章的时候

Mithril有个好，就是打包特别小，prod环境如下图

prod

stg环境如下图

stg

prod环境之所以有344kb是因为webpack.config.js中有这样一段

entry: {
        bundle: ["babel-polyfill", './index.js'],
        school: ["babel-polyfill", './school.js'],
        clubStore: ["babel-polyfill", './clubStore.js'],
},

其实是因为babel-polyfill的问题，因为有用户用iPhone4。导致includes这个函数在低版本中是不可用的。

和你们全家桶比起来，那是非常感人的size了。

当然这些不是写这个文章的目的，因为我每一次部署需要执行2行命令

npm run build
./sync

一般来说，其实已经不复杂了，但是经过我昨天一番写代码，把这个用了一行就好了，就是上面的gulp prod。

var gulp = require('gulp');
var webpackConfig = require("./webpack.config.js");

var webpack = require("webpack");
var webpackStream = require('webpack-stream');
var scp = require('gulp-scp');

var prodServer = {
    host: 'xxx.xxx.xxx.xxx',
    user: 'deploy',
    port: 22,
    path: 'TYPEYOURADDRESSHERE'
}

var stgServer = {
    host: 'xxx.xxx.xxx.xxx',
    user: 'deploy',
    port: 22,
    path: 'TYPEYOURADDRESSHERE'
}

gulp.task('default', function() {
    console.log('run `gulp dev` or run `gulp prod`')
});

gulp.task("prod", function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.plugins = myConfig.plugins.concat(
        new webpack.DefinePlugin({
            "process.env": {
                // This has effect on the react lib size
                "NODE_ENV": JSON.stringify("production")
            }
        }),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        })
    );
    return gulp.src('./entry.js')
        .pipe(webpackStream(myConfig))
        .pipe(gulp.dest('public/dist/'))
        .pipe(scp(prodServer));
});

gulp.task("dev", function(callback) {
    // modify some webpack config options
    var myConfig = Object.create(webpackConfig);
    myConfig.plugins = myConfig.plugins.concat(
        new webpack.DefinePlugin({
            "process.env": {
                // This has effect on the react lib size
                "NODE_ENV": JSON.stringify("development")
            }
        })
    );
    return gulp.src('./entry.js')
        .pipe(webpackStream(myConfig))
        .pipe(gulp.dest('public/dist/'))
        .pipe(scp(stgServer));
});

因为不想改动很多目录结构，所以我把部分的webpack配置放到了gulpfile.js里面，就是myConfig那一段，所以用了几个包把两行代码简写为了一行代码，然后其实就变得更加规范了。

一把梭。

千万不要安利一百个包的Vue，还有React给我。