匠人学院 JR Academy学AI来匠人
匠人学院 JR Academy学AI来匠人

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-airwallex.png/image/layout/pay-alipay.png
EN

关于公司

关于我们元宇宙课堂新闻资讯匠人工作成为导师匠人导师联系我们匠人商店J3.Club

匠人资源

工作内推匠人活动1对1私教行业白皮书线上学习平台面试中心分享面试经验Internship会员中心

AI 工具

AI 工具箱考证匠 Cert Master求职匠 Job Hunter牛小匠 UniMate AI

AI 学习方向

全部学习方向AI EngineerContext EngineeringVibe CodingPrompt MasterAI BuilderAI 产品经理Python 入门

AI 应用提效

AI 办公提效AI 数据分析AI 财务AI 内容创作AI 视觉创作前端开发Hermes AgentOpenClaw 本地智能体

大学资源

墨尔本大学昆士兰大学新南威尔士大学悉尼大学莫那什大学阿德莱德大学RMITQUTUTS

少儿 AI 教育

Airbotix 少儿 AI 编程澳洲家长实用资料库NAPLAN 成绩单怎么看My School 学校数据指南悉尼私校学费 2026少儿编程课程与训练营

移民服务

澳洲移民技术移民189/190/491雇主担保482/186/494投资移民188/888英国移民美国移民加拿大移民

企业合作

P3职业孵化器Enterprise (EN)企业培训实习合作招聘合作申请合作

求职代理

岗位代投职位监控LinkedIn代运营LinkedIn人脉代加了解P3项目

匠人支持

FAQsTerms & ConditionsPrivacy PolicyCancellation & Refund PolicySite map

Top Categories

Web全栈班DevOps项目班数据工程全栈班数据分析项目班编程入门班Business Analyst实习算法集训营

求职就业

BA和产品经理实习数据科学实习数据分析实习Marketing实习简历修改面试指导导师指导VIP

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 2, 171 La Trobe St, Melbourne VIC 3000
四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号
Business Hub, 155 Waymouth St, Adelaide SA 5000

联系方式

hello@jiangren.com.au0421-672-555

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2026 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572

首页/资源中心/文章详情
JR Academy · Blog职业洞察

使用Make构建网站

网站开发正变得越来越专业,涉及到各种各样的工具和流程,迫切需要构建自动化。 所谓“构建自动化”,就是指使用构建工具,自动实现“从源码到网页”的开发流程。这有利于提高开发效率、改善代码质量。 本文介绍如何使用make命令,作为网站的构建工具。以下内容既是make语法的详细实例,也是网站构建的实战教程。你完全可以将代码略作修改,拷贝到自己的项目。

发布日期2020-06-22
阅读时长2 分钟
作者Ann Ann

快速导航

  • 一、Make的优点
  • 二、常见的构建任务
  • 三、Makefile的通用配置
  • 四、检查语法错误
  • 五、模板编译
  • 六、Coffee脚本转码
  • 七、合并文件
  • 八、压缩JavaScript脚本
  • 九、删除临时文件
  • 十、测试
  • 十一、多任务执行
  • 十二、声明伪文件
  • 十三、Makefile文件示例

一、Make的优点

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

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

  • 方案一:基于Node.js的专用构建工具(Grunt、Gulp、Brunch、Broccoli、Mimosa)

  • 方案二:npm run命令(教程1、2、3)

  • 方案三:make命令

我觉得,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。

二、常见的构建任务

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

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

这些任务用到 JSHint、handlebars、CoffeeScript、uglifyjs、mocha 等工具。对应的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变量重新赋值为,优先在 node_modules/.bin 目录寻找命令。这是因为(当前项目的)node模块,会在 node_modules/.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脚本文件,存放在变量source_files,函数wildcard用来扩展通配符。然后,将变量source_files中的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
News
作者Ann Ann
一键分享或复制链接
Ann Ann
Reviewer: Ann Ann

Founder of JR Academy

查看该作者的更多文章 →
← 上一篇理解OAuth 2.0下一篇 →Commit message 和 Change log 编写指南

相关文章推荐

什么!一站式BusinessAnalyst训练营+实习又来了?快来抢占职场先机!

2024-08-30

精彩回顾|AI与创新激情碰撞!悉尼JR&AtlassianAI主题活动完美收官!

2024-08-26

官宣!澳洲政府颁布新规!留学生或将被限制入境,485确定免费延长2年!

2024-08-21

平心而论,我在澳洲没见过这么好的数据分析班!

2024-08-20

澳洲数据分析+任何专业=王炸!

2024-08-20

年薪可达10万澳币?这“十大”工作成为华人梦中情职!就业季来袭,墨尔本职业博览会强势开启,500+岗位为你职业生涯保驾护航!

2024-08-14
查看全部文章 →
JR Academy
全球华人学习 AI 第一站
✓15000+ 学员
✓50+ 课程
✓AI 驱动学习平台
训练营免费资源AI学习职业辅导
精选推荐
AI 职业影响地图
测测你的职业风险等级,查看转型路径与学习方向
热门工具
AI & 数据训练营
系统化课程 + 真实项目实战,快速提升竞争力
热门课程
1v1 就业辅导
资深导师一对一指导,简历优化 + 面试准备
就业保障
企业内训定制
AI 技能培训方案,助力团队升级
企业服务
热门标签
Vibe CodingAI 编程CursorClaude求职攻略Prompt前端开发后端开发
订阅更新

获取最新 AI 学习资源、技术教程和求职攻略,直接送达邮箱。

我们尊重您的隐私,不会发送垃圾邮件