2017-3-2

把现在项目用的基础架构打包了一下

feture

使用了stylus(换个口味吧…)
ES6写的模块, babel编译成amd模块, 然后用requirejs加载

github: https://github.com/lilonghe/web-engineering-scaffolding

Gulp

gulp-changed

默认会更新所有匹配文件，用了这个瞬间轻松 >_-

1
2
3
4
5
6

gulp.src(['app/pages/**/*.html'],{base: './app/pages'})
    .pipe(changed('dist/'))
    xxxx ...
        .pipe(gulp.dest('dist/'));
changed() 传递的路径要和 dest() 的路径一致
技术思路是：对比源文件和输出文件的最后修改时间，后者小则通过

gulp-wrap

1
2
3
4

gulp.src(['app/pages/**/*.html'],{base: './app/pages'})
    .pipe(wrap({src:"app/Master.html"}))
        .pipe(gulp.dest('dist/'));
缺点是无法设置 title

gulp-file-include

1
2
3
4
5
6
7
8

.pipe(include({
    prefix: '@@',
    basepath: './app/include/'
}))
@@include('header.html',{
    "title":"选课"
})
这个可以自定义 title ，but 每个页面都要加~~~

gulp-plumber

1
2
3
4
5
6
7
8
9

var plumber_handler = {
    errorHandler: function(err) {
        console.log(err);
        this.emit('end') 
    }
};
gulp.src("app/static/css/*.scss")
    .pipe(plumber(plumber_handler))
示例是不传参的，但测试出现错误后无法继续运行

gulp-sass + gulp-sourcemaps
gulp-babel

gulp-uglify
gulp-concat
gulp-clean

东西一复杂，必然要找个解决方案。
资源可分为: JavaScript , CSS , Html , lib

JavaScript

babel
每个复杂页面独占一个 JS， 然后入口页面写简单的 JS
然后利用 Gulp 打包

CSS

gulp-sass
目前采用 sass ，简单编译，并没有标准模块化

Html

gulp-file-include
纯前端，所以页面不会压缩

library

直接拷过去

本文皆是琢磨而来，小作坊式开发，未经过大型实战，敬请知悉哟！

因为自己也没进过大公司，不熟悉业界的标准，所以也是做着学着 ^_^
最近手上的这个项目 JS 也逐渐复杂了起来，所以就想着弄个模块开发试试吧~
然后大概弄了个基本骨架~~~
Github: aHR0cHM6Ly9naXRodWIuY29tL2xpbG9uZ2hlL2xpdHRsZS1jb2RlL3RyZWUvbWFzdGVyL3dlYi1lbmdpbmVlcmluZw==
先把这个放上来，等有空了把项目重构成模块化了再放上来一版 O_O

JS 模块化工具

选择 ES6 是因为它已经成为了标准，未来是它的
因为现在浏览器支持有限，所以涌现了大批工具
使用 ES6 规范写模块
使用 babel 编译 （preset-es2015）成 ES5 语法，但是，它使用了 require
因为 babel 没有直接转为浏览器可识别的语法
所以我们要使用 browserify 来打包转换它(打包原因估计是 ES5 没有文件引入)

构建工具

ok， Gulp 即可
PS: webpack 似乎有点复杂和庞大了

还有兼容性问题：
IE 8 对 Object.defineProperty 的支持有点问题
所以我们需要引入兼容文件

1
2
3

<!--[if lte IE 8]>
    https://github.com/inexorabletash/polyfill/blob/master/es5.js
<![endif]-->