摩登时代

在 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 + 任务名称执行相应的任务

结束语

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