随笔

web 工程化

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]-->

本文链接:https://note.lilonghe.net//post/web-build.html

-- EOF --