在近几年，越来越多的人都加入到前端的行列，前端也不再仅仅是一些验证，而是把更多的业务逻辑放在前端，让用户有更好的体验，
所以，前端的文件(html/css/js)越来越多，迫切需要工程化的管理。
基于MVC模式的B/S架构流行了很长时间，现在仍然很流行(企业内部)，但基于REST模式的B/S架构也迅速流行，这种架构最主要的特点是前后端彻底分离。
前端成为一个独立的系统运行，后端服务只需提供相应的接口，使用JSON通信。
前端工程管理工具非常多，比较优秀的工程管理工具如Grunt/Gulp/webpack/parcel，依赖管理工具Npm/Yarn/bower，这里以Gulp为例介绍前端开发自动化管理。
创建工程目录
1.png
相应目录及文件说明：
Css: 样式目录，也可使用sass编写
Dist: 打包发布的目录
Html: 模板文件
Img: 图片
Js: 脚本
Lib: 依赖js工具包
.bowerrc: 是bower的配置目录，这里指定下载的文件存入本地lib目录
Bower.json: 是bower工具的配置目录，它是用于下载外部依赖的
Gulpfile.js: 是Gulp的配置文件，主要是配置一些Task
Index.html：首页
Package.json: 是npm管理工具的配置文件
Gulp工具是基于Nodejs，所以先安装Nodejs。
安装bower
Npm install -g bower
Note:bower init可以生成bower.json配置文件。
安装依赖js
Bower install jquery
Jquery默认自动存在 app\bower_components(没有会创建)
习惯上在当前目录加“.bowerrc”
{"directory":"lib"}
即保存到当前目录lib中。
Bower install --save jquery
这样即可下载jquery也可把它及版本信息记录在bower.json文件中，
执行bower install会把bower.json中所有js自动下载。
安装Gulp
Npm install --save gulp
一次安装多个，中间用空格分隔，如: npm install –save gulp gulp-connect
Note:npm库下载缓慢解决方案
淘宝针对国内下载npm库缓慢的问题，使用建立自己的cnpm库。
使用淘宝的NPM库镜像
$ npm install -g cnpm --registry=http://registry.npm.taobao.org
Cnpm install --save gulp
实现第一个页面
安装bootstrap和font-awesome
Bower install –save bootstrap
Bower install –save font-awesome
在页面上导入如下：
<link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
继承编写HTML页面内容，每次都要手动刷新才能看到效果，下面通过gulp的一个工具实现自动刷新的效果。
通过gulp自动重载Html内容代码如下:
gulp.task('connect', function () {
connect.server({
root: './',
port: 8888,
host: '127.0.0.1',
livereload: true
});
});
gulp.task('html', function () {
gulp.src('./**/*.html')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch(['./*.html'], ['html']);
});
gulp.task('default',['connect', 'watch']);
此时，执行gulp命令，会启动一个web服务，输入地址：localhost:8888/index.html查看Html内容，当编辑并保存Html内容时，上面的watch任务会监听Html内容变化，有变化就自动重载Html内容。
通过gulp自动编译、合并、压缩css内容代码如下:
gulp.task('css:compile', ['css:clean'], function() {
return gulp.src('./css/**/*.css')
.pipe(cssimport())
.pipe(concat('main.css'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss({
processImport: true
}))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
});
gulp.task('css:clean', function() {
return gulp.src(['dist/css'], {read: false})
.pipe(clean());
});
gulp.task('watch', function () {
gulp.watch(['css/**/*.css'], ['css:compile']);
});
gulp.task('default',['connect', 'watch']);
同上，通过gulp启动web服务，同时监听css文件变化，若有变化则自动执行css:compile任务，该任务就是合并、压缩css文件的(若是sass文件也可以先编译)。
也可以手动执行任务，如:gulp css:compile
通过gulp自动编译、合并、压缩js内容代码如下:
gulp.task('js:compile', ['js:clean'], function() {
return gulp.src('js/**/*.js')
//.pipe(jshint('.jshintrc'))
//.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
gulp.task('js:clean', function() {
return gulp.src(['dist/js'], {read: false})
.pipe(clean());
});
由于缓存的原因，js任务一般手动执行任务，如gulp js:compile
这样，页面上依赖的css，js都被自动编译、合并、压缩到dist目录(后面再加上图片和字体)，只需要引入dist目录相应的文件即可。
获取完整的例子，请添加VX：ITI2018。
纯前端的开发，避免服务端代码入侵导致不便测试，Gulp丰富的插件及自动化的管理，使编写前端应用变成一种享受，同时兼顾移动端。
对于大型系统的发布，Gulp插件可以为每个修改过的静态资源添加md5后缀，以解决客户端缓存的问题。
学习交流，请加群：654979292
网友评论