我的前端工作流
摩登时代
在 Node.js 出现以前，以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临，我们需要赶上这一次潮流，加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。
开始
先要具备Node.js的环境，安装NPM管理工具
全局安装gulp
$ npm install gulp -gpackage.json
npm通过package.json文件来管理依赖。 先进入的项目目录, 执行下面命令，一路回车即可。会生成名为package.json的文件。
$ npm init导入包
这个我构建好的json文件，将devDependencies下的所有节点复制过去。
package.json
{
"name": "ba",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.12.5",
"coffee-script": "^1.10.0",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-cache": "^0.4.4",
"gulp-concat": "^2.6.0",
"gulp-html-extend": "^1.1.6",
"gulp-imagemin": "^2.4.0",
"gulp-jshint": "^2.0.0",
"gulp-livereload": "^3.8.1",
"gulp-minify-css": "^1.2.4",
"gulp-minify-html": "^1.0.6",
"gulp-notify": "^2.2.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.0.6",
"gulp-sitemap": "^4.1.1",
"gulp-uglify": "^1.5.3",
"gulp-watch": "^4.3.5",
"jshint": "^2.9.2"
},
"description": ""
}完成之后安装这些包，版本如果有更新，去掉版本号默认会安装最稳定版本。安装时间视网络情况机器性能而定。首次安装时间比较长。
$ npm install构建项目
在当前目录下创建source文件夹同时为其创建子目录，如下结构，
其中views目录下layouts用于视图模版，application用于视图文件
+ node_modules
- source
+ img
+ js
+ scss
- views
+ application
+ layouts
gulpfile.coffee
pacakge.json构建模版
视图模版使用gulp-html-extend进行解析，使用方法及配置可参考其官方文档。
在layouts目录创建以下文件，如果有多套模版可以在layouts下创建子目录区分。
- source
+ img
+ js
+ scss
- views
+ application
- layouts
_meta.html
_link.html
_script.html
_header.html
_footer.html
default.html@@include可将需要的局部模版导入
@@placeholder可配置模版内容，下面例子会给出。
source/layouts/default.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- @@placeholder= title -->
<!-- @@include ./_meta.html -->
<!-- @@include ./_link.html -->
<!-- @@include ./_script.html -->
</head>
<body>
<div id="Wrapper">
<!-- @@include ./_header.html -->
<!-- @@placeholder= content -->
<!-- @@include ./_footer.html -->
</div>
</body>
</html>在此配置meata标签
source/layouts/_meta.html
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />在此配置link的内容，如css，font，icon等
source/layouts/_link.html
<link type="image/x-icon" rel="shortcut icon" href="/img/favicon.ico">
<link href="/css/style.css" type="text/css" rel="stylesheet" media="all" />在此配置需要的js文件
source/layouts/_script.html
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/js/index.js" type="text/javascript"></script>在此配置头部内容
source/layouts/_header.html
<div class="page-header">
我是头部
</div>在此配置底部内容
source/layouts/_footer.html
<div class="page-footer">
我是底部
</div>到目前为止已经构建好视图模版了。
使用模版
在application目录新建index.html文件
@@master指定模版文件
@@block自定义开始块
@@close自定义结束块
source/views/application
<!-- @@master = ../layouts/default.html-->
<!-- @@block = title-->
<title>我是标题</title>
<!-- @@close-->
<!-- @@block = content-->
<div class="main">
我是内容
</div>
<!-- @@close-->生成的文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>我是标题</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link type="image/x-icon" rel="shortcut icon" href="/img/favicon.ico">
<link href="/css/style.css" type="text/css" rel="stylesheet" media="all" />
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/js/index.js" type="text/javascript"></script>
</head>
<body>
<div id="Wrapper">
<div class="page-header">
我是头部
</div>
<div class="main">
我是内容
</div>
<div class="page-footer">
我是底部
</div>
</div>
</body>
</html>建立task
完成模版构建之后，我们需要对网页对静态资源使用gulp进行处理。
下面是我对gulp任务，使用CoffeeScript，然后我会讲解一个任务。有一点需要注意的地方，gulp-ruby-sass需要有ruby语言环境，这是安装传送门Ruby，一般Mac会自带Ruby。
gulpfile.coffee
gulp = require('gulp')
del = require('del')
cache = require('gulp-cache')
uglify = require('gulp-uglify')
concat = require('gulp-concat')
jshint = require('gulp-jshint')
broeserSync = require('browser-sync')
sitemap = require('gulp-sitemap')
imagemin = require('gulp-imagemin')
sass = require('gulp-ruby-sass')
minifycss = require('gulp-minify-css')
extender = require('gulp-html-extend')
minifyHTML = require('gulp-minify-html')
autoprefixer = require('gulp-autoprefixer')
gulp.task 'browser-sync', ['rebuild'], ->
broeserSync({
server: {
baseDir: './dist/'
},
port: 8080,
host: '0.0.0.0',
ui: {
port: 8081
}
})
gulp.task 'rebuild', ->
broeserSync.reload()
gulp.task 'watch', ->
gulp.watch(['./dist/**/*.*'], ['rebuild'])
gulp.watch(['./source/**/*.html'], ['extend'])
gulp.watch(['./source/**/*.scss'], ['styles'])
gulp.watch(['./source/**/*.js'], ['js'])
gulp.watch(['./source/**/*.jpg','./source/**/*.png'], ['image'])
gulp.task 'styles', ->
return sass('./source/scss/**/*.scss', { style: 'compressed' })
.pipe autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')
.pipe concat('style.css')
.pipe minifycss()
.pipe gulp.dest('./dist/css/')
gulp.task 'extend', ->
gulp.src('./source/views/application/**/*.html')
.pipe extender({annotations:false,verbose:false})
.pipe minifyHTML()
.pipe gulp.dest('./dist/')
gulp.task 'js', ->
gulp.src('./source/**/*.js')
.pipe uglify()
.pipe gulp.dest('./dist/')
gulp.task 'image', ->
gulp.src(['./source/**/*.jpg','./source/**/*.png'])
.pipe cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true}))
.pipe gulp.dest('./dist/')
gulp.task 'clean', ->
del ['./dist/css','./dist/js','./dist/gallery', './dist/img', './dist/**/*.html']
gulp.task 'sitemap', ->
gulp.src('dist/**/*.html', { read: false })
.pipe sitemap({ siteUrl: 'http://yulive.cn' })
.pipe gulp.dest('./dist/')
gulp.task 'build', ['styles', 'js', 'image', 'extend']
gulp.task 'default', ['browser-sync', 'watch']styles任务，会将scss目录下的样式文件编译成css，然后autoprefixer方法会自动添加不同浏览器的前缀，concat合并成一个文件style.css后会使用minifycss压缩，最后输出到指定到目录gulp.dest。如果能看懂这个任务其他也都ok了。
gulp.task 'styles', ->
return sass('./source/scss/**/*.scss', { style: 'compressed' })
.pipe autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')
.pipe concat('style.css')
.pipe minifycss()
.pipe gulp.dest('./dist/css/')extend任务会将模版文件解析并生成相应的html
js压缩js
image对图片资源进行无损压缩
clean清空编译目录
sitemap生成站点地图，便于SEO
watch监听文件，当发生改动时调用相应的任务
build用于构建编译文件
default默认任务，使用gulp命令执行的任务
browser-sync用于开发环境实时更新页面，免去手动刷新的烦恼
rebuild当资源文件更新时让browser-sync重新加载变更
完成这些之后，可以使用gulp + 任务名称执行相应的任务
结束语
这是我的前端工作流，构建静态页面速度是不是一下子就提升了呢。
腾讯云开发者
