為什么

懶

是不是

不是

用到的一些東西

目前公司前端工程始于kt-wechat這個項目，也就是一個公眾號網(wǎng)頁，里面大概有一些奇奇怪怪的微信接口，反正功能還是比較全面的。 微信打開http://wechat.ktfootball.com就可以看到。
現(xiàn)有的技術(shù)選型都是建立在小且穩(wěn)健，能夠小步快走的模式，才能應(yīng)對拍腦袋產(chǎn)生的需求。所以開始我們的項目是簡單的一個目錄結(jié)構(gòu)，一個標(biāo)準(zhǔn)的express模板，然后加上mithril, 打包也用上了很潮的webpack，然后在官方教程里面寫了兩個npm script，就可以穩(wěn)健的開發(fā)了。

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

在這里再次申明，express是因為有個generator可以用，而且express也只是作為一個container，用來和微信的接口做一些授權(quán)什么的，前端的express中基本上是不存在什么邏輯的。所以本質(zhì)上我只需要一個 index.html 文件就可以了。

Webpack

這里加上圖片是因為顯得內(nèi)容比較豐富。

這是是0.1版本的時候的構(gòu)建流程，

dev npm run watch, 寫代碼， Git， 然后 rsync
prod Git, npm run build， 然后 rsync

后來多了一個小伙伴寫代碼，他是windows的機器，所以就出現(xiàn)了

dev npm run watch, 寫代碼， Git， 然后 scp
prod Git, npm run build， 然后 scp

所以項目下面有了兩個，三個sh文件，分別叫做 sync, winsync, winsync_dev。是不是很酷。

截止到我寫這篇文章的時候

Mithril有個好，就是打包特別小，prod環(huán)境如下圖

prod

stg環(huán)境如下圖

stg

prod環(huán)境之所以有344kb是因為webpack.config.js中有這樣一段

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

其實是因為babel-polyfill的問題，因為有用戶用iPhone4。導(dǎo)致includes這個函數(shù)在低版本中是不可用的。

和你們?nèi)彝氨绕饋?，那是非常感人的size了。

當(dāng)然這些不是寫這個文章的目的，因為我每一次部署需要執(zhí)行2行命令

npm run build
./sync

一般來說，其實已經(jīng)不復(fù)雜了，但是經(jīng)過我昨天一番寫代碼，把這個用了一行就好了，就是上面的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));
});

因為不想改動很多目錄結(jié)構(gòu)，所以我把部分的webpack配置放到了gulpfile.js里面，就是myConfig那一段，所以用了幾個包把兩行代碼簡寫為了一行代碼，然后其實就變得更加規(guī)范了。

一把梭。

千萬不要安利一百個包的Vue，還有React給我。