摩登时代

在 Node.js 出现以前,以往的前端开发工作属于石器时代。而随着前端技术的大爆炸来临,我们需要赶上这一次潮流,加入到前端开发到摩登时代去。这篇博文主要是记录如何构建前端工作流。

开始

先要具备Node.js的环境,安装NPM管理工具
全局安装gulp

1
$ npm install gulp -g

package.json

npm通过package.json文件来管理依赖。
先进入的项目目录, 执行下面命令,一路回车即可。会生成名为package.json的文件。

1
$ npm init

导入包

这个我构建好的json文件,将devDependencies下的所有节点复制过去。
package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
"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": ""
}

完成之后安装这些包,版本如果有更新,去掉版本号默认会安装最稳定版本。安装时间视网络情况机器性能而定。首次安装时间比较长。
1
$ npm install

构建项目

在当前目录下创建source文件夹同时为其创建子目录,如下结构,
其中views目录下layouts用于视图模版,application用于视图文件

1
2
3
4
5
6
7
8
9
10
11
+ node_modules
- source
+ img
+ js
+ scss
- views
+ application
+ layouts

gulpfile.coffee
pacakge.json

构建模版

视图模版使用gulp-html-extend进行解析,使用方法及配置可参考其官方文档。
layouts目录创建以下文件,如果有多套模版可以在layouts下创建子目录区分。

1
2
3
4
5
6
7
8
9
10
11
12
13
- 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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

1
2
3
4
<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

1
2
<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

1
2
<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

1
2
3
<div class="page-header">
我是头部
</div>

在此配置底部内容
source/layouts/_footer.html

1
2
3
<div class="page-footer">
我是底部
</div>

到目前为止已经构建好视图模版了。

使用模版

application目录新建index.html文件
@@master指定模版文件
@@block自定义开始块
@@close自定义结束块
source/views/application

1
2
3
4
5
6
7
8
9
10
11
<!-- @@master = ../layouts/default.html-->

<!-- @@block = title-->
<title>我是标题</title>
<!-- @@close-->

<!-- @@block = content-->
<div class="main">
我是内容
</div>
<!-- @@close-->

生成的文件内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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了。

1
2
3
4
5
6
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 + 任务名称执行相应的任务

结束语

这是我的前端工作流,构建静态页面速度是不是一下子就提升了呢。