当前位置:建站教程 >> 程序 >> 使用 Make 构建网站

使用 Make 构建网站

2016-10-18

网站开发正变得越来越专业,涉及到各种各样的工具和流程,迫切需要构建自动化。

所谓"构建自动化",就是指使用构建工具,自动实现"从源码到网页"的开发流程。这有利于提高开发效率、改善代码质量。

本文介绍如何使用make命令,作为网站的构建工具。以下内容既是make语法的实例,也是网站构建的实战教程。你完全可以将代码略作修改,拷贝到自己的项目。

(题图:国家考古博物馆,西班牙,摄于2014年8月)

一、Make的优点

首先解释一下,为什么要用Make。

目前,网站项目(尤其是Node.js项目)有三种构建方案。

我觉得,make是大型项目的首选方案。npm run可以认为是make的简化形式,只适用于简单项目,而Grunt、Gulp那样的工具,有很多问题。

(1)插件问题

Grunt和Gulp的操作,都由插件完成。即使是文件改名这样简单的任务,都要写插件,相当麻烦。而Make是直接调用命令行,根本不用担心找不到插件。

(2)兼容性问题

插件的版本,必须与Grunt和Gulp的版本匹配,还必须与对应的命令行程序匹配。比如,grunt-contrib-jshint插件现在是0.11.0版,对应Grunt 0.4.5版和JSHint 2.6.0版。万一Grunt和JSHint升级,而插件没有升级,就有可能出现兼容性问题。Make是直接调用JSHint,不存在这个问题。

(3)语法问题

Grunt和Gulp都有自己的语法,并不容易学,尤其是Grunt,语法很罗嗦,很难一眼看出来代码的意图。当然,make也不容易学,但它有复用性,学会了还可以用在其他场合。

(4)功能问题

make已经使用了几十年,全世界无数的大项目都用它构建,早就证明非常可靠,各种情况都有办法解决,前人累积的经验和资料也非常丰富。相比之下,Grunt和Gulp的历史都不长,使用范围有限,目前还没有出现它们能做、而make做不到的任务。

基于以上理由,我看好make。

二、常见的构建任务

下面是一些常见的网站构建任务。

  • 检查语法
  • 编译模板
  • 转码
  • 合并
  • 压缩
  • 测试
  • 删除

这些任务用到 JSHinthandlebarsCoffeeScriptuglifyjsmocha 等工具。对应的package.json文件如下。

 "devDependencies": { "coffee-script": "~1.9.1", "handlebars": "~3.0.0", "jshint": "^2.6.3", "mocha": "~2.2.1", "uglify-js": "~2.4.17" } 

我们来看看,Make 命令怎么完成这些构建任务。

三、Makefile的通用配置

开始构建之前,要编写Makefile文件。它是make命令的配置文件。所有任务的构建规则,都写在这个文件(参见《Make 命令教程》)。

首先,写入两行通用配置。

 PATH := node_modules/.bin:$(PATH) SHELL := /bin/bash 

上面代码的PATH和SHELL都是BASH变量。它们被重新赋值。

PATH变量重新赋值为,优先在 nodemodules/.bin 目录寻找命令。这是因为(当前项目的)node模块,会在 nodemodules/.bin 目录设置一个符号链接。PATH变量指向这个目录以后,调用各种命令就不用写路径了。比如,调用JSHint,就不用写 ~/node_modules/.bin/jshint ,只写 jshint 就行了。

SHELL变量指定构建环境使用BASH。

四、检查语法错误

第一个任务是,检查源码有没有语法错误。

 js_files = $(shell find ./lib -name '*.js') lint: $(js_files) jshint $? 

上面代码中,shell函数调用find命令,找出lib目录下所有js文件,保存在变量js_files。然后,就可以用jshint检查这些文件。

使用时调用下面的命令。

 $ make lint 

五、模板编译

第二个任务是编译模板。假定模板都在templates目录,需要编译为build目录下的templates.js文件。

 build/templates.js: templates/*.handlebars
    mkdir -p $(dir $@) handlebars templates/*.handlebars > $@ template: build/templates.js 

上面代码查看build目录是否存在,如果不存在就新建一个。dir函数用于取出构建目标的路径名(build),内置变量$@代表构建目标(build/templates.js)。

使用时调用下面的命令。

 $ make template 

六、Coffee脚本转码

第三个任务是,将CofferScript脚本转为JavaScript脚本。

 source_files := $(wildcard lib/*.coffee) build_files := $(source_files:lib/%.coffee=build/%.js) build/%.js: lib/%.coffee
    coffee -co $(dir $@) $< coffee: $(build_files) 

上面代码中,首先获取所有的Coffee脚本文件,存放在变量sourcefiles,函数wildcard用来扩展通配符。然后,将变量sourcefiles中的coffee文件名,替换成js文件名,即 lib/x.coffee 替换成 build/x.js 。

使用时调用下面的命令。

 $ make coffee 

七、合并文件

使用cat命令,合并多个文件。

 JS_FILES := $(wildcard build/*.js) OUTPUT := build/bundle.js

concat: $(JS_FILES) cat $^ > $(OUTPUT) 

使用时调用下面的命令。

 $ make concat 

八、压缩JavaScript脚本

将所有JavaScript脚本,压缩为build目录下的app.js。

 app_bundle := build/app.js

$(app_bundle): $(build_files) $(template_js) uglifyjs -cmo $@ $^ min: $(app_bundle) 

使用时调用下面的命令。

 $ make min 

还有另一种写法,可以另行指定压缩工具。

 UGLIFY ?= uglify

$(app_bundle): $(build_files) $(template_js) $(UGLIFY) -cmo $@ $^ 

上面代码将压缩工具uglify放在变量UGLIFY。注意,变量的赋值符是 ?= ,表示这个变量可以被命令行参数覆盖。

调用时这样写。

 $ make UGLIFY=node_modules/.bin/jsmin min 

上面代码,将jsmin命令给变量UGLIFY,压缩时就会使用jsmin命令。

九、删除临时文件

构建结束前,删除所有临时文件。

 clean: rm -rf build 

使用时调用下面的命令。

 $ make clean 

十、测试

假定测试工具是mocha,所有测试用例放在test目录下。

 test: $(app_bundle) $(test_js) mocha 

当脚本和测试用例都存在,上面代码就会执行mocha。

使用时调用下面的命令。

 $ make test 

十一、多任务执行

构建过程需要一次性执行多个任务,可以指定一个多任务目标。

 build: template concat min clean 

上面代码将build指定为执行模板编译、文件合并、脚本压缩、删除临时文件四个任务。

使用时调用下面的命令。

 $ make build 

如果这行规则在Makefile的最前面,执行时可以省略目标名。

 $ make 

通常情况下,make一次执行一个任务。如果任务都是独立的,互相没有依赖关系,可以用参数 -j 指定同时执行多个任务。

 $ make -j build 

十二、声明伪文件

最后,为了防止目标名与现有文件冲突,显式声明哪些目标是伪文件。

 .PHONY: lint template coffee concat min test clean build 

十三、Makefile文件示例

下面是两个简单的Makefile文件,用来补充make命令的其他构建任务。

实例一。

 PROJECT = "My Fancy Node.js project" all: install test server

test: ;@echo "Testing ${PROJECT}....."; \
    export NODE_PATH=.; \ ./node_modules/mocha/bin/mocha; install: ;@echo "Installing ${PROJECT}....."; \
    npm install

update: ;@echo "Updating ${PROJECT}....."; \
    git pull --rebase; \
    npm install

clean : ; rm -rf node_modules .PHONY: test server install clean update 

实例二。

 all: build-js build-css

build-js: browserify -t brfs src/app.js > site/app.js

build-css: stylus src/style.styl > site/style.css .PHONY build-js build-css 

十四、参考链接

(完)

上一页:  织梦上下篇的样式修改    下一页:  没有了