匠人学院 JR Academy
  • Position

    我现在在哪,该往哪走?

    几道题看你现在的岗位受 AI 影响多大、机会在哪。免费,不用注册。

    免费看看我现在在哪

    AI 对职业的影响

    我的工作会被 AI 替代吗常见职业的 AI 影响与转型方向AI 时代的新岗位做什么、要求什么、怎么转过去AI 影响自测几道题看你所在岗位的风险和机会

    测一测

    能力测评AI Engineer 面试准备度自测职业性格测试找到和你性格匹配的方向职业规划回答几个问题,看可能适合的职业回国求职评估按学校、专业、毕业时间看回国机会
  • Skill

    不知道该学什么 AI?

    先按方向免费学,每个方向从入门讲到动手做;想系统学再看训练营和导师。

    按方向免费开始学

    按方向免费学

    Vibe Coding用 AI 写代码,零基础可学AI 办公提效文档、表格、汇报用 AI 省时间Prompt 大师把需求说清楚的写法AI EngineerRAG、Agent、MCP 工程实践AI 数据分析用 AI 做查询、清洗和报表全部学习方向 →

    训练营与课程

    全部训练营按职业方向、难度、形式筛选AI Engineer Bootcamp从 LLM 应用到 Agent 的工程训练营人人都能学的 AI Coding非技术背景的 AI 编程实战AI 工作流提效营在职人士的 AI 工作流导师团队一线工程师与行业导师全部课程 →

    动手练与资料

    互动 LabPrompt、前端、Python、AWS 在线练学习路线图一张图看清该按什么顺序学Cheat Sheets语言与工具速查表Wiki 知识库AI 工具与概念讲解视频讲座、公开课、学员分享免费资源 →
  • Evidence

    拿什么让雇主相信你?

    证书、项目、团队实战、比赛作品,最后整理成一份作品档案。

    了解作品档案

    考证

    考证匠 · 全部认证AWS、Azure、GCP、Claude 等备考与模考AWS SAA-C03云架构师入门认证Azure AI-102微软 AI 工程师认证Claude 认证Anthropic Claude 系列认证模拟考试按真实考试界面限时练全部认证 →

    项目与团队实战

    P3 团队实战和真人协作做项目,模拟实习式的团队流程P3 项目经历P3 项目能写进简历的部分Demo Day项目成果展示P3 证书完成项目后的证明P3 全部 →

    比赛与作品

    黑客松限时做出一个作品提交作品把你的项目放进作品展示CareerOS 作品档案在桌面版做任务,提交的结果整理成作品
    考证匠浏览器插件 + App + 小程序截屏分析考题,随时刷题了解考证匠
  • Connect

    怎么把自己推出去?

    简历、面试、内推、导师。先看你和目标岗位差多少,再决定从哪补。

    用求职匠开始

    简历与机会

    毕业生求职澳洲、中国、马来西亚、新加坡、美国、英国求职准备求职匠AI 求职工作台:改简历、找岗位、投递AI 简历对照 JD 改写简历内推机会学员和导师分享的内推岗位机会实习、项目和合作机会Offer 榜学员拿到的 Offer

    面试

    AI 模拟面试文字或语音练一次,看差在哪面试中心按公司和岗位找题面经真实面试经历System Design 手册系统设计面试准备面试全部 →

    导师

    1v1 导师按小时约 AI、求职、技术导师拼团私教几个人一起上,每人更便宜职业辅导服务简历、面试、方向的辅导套餐成为导师加入匠人导师团队
    求职匠桌面版一个工作台管完整求职在 macOS/Windows 整理真实经历,按岗位完善简历版本。了解求职匠
  • Community

    去哪认识同路的人?

    讲座、公开课、Workshop、黑客松,线上线下都有。

    看近期活动

    活动类型

    讲座行业嘉宾分享公开课免费试听课程内容Workshop动手做一个小作品黑客松组队限时开发新生节开学季的校园活动

    城市

    悉尼悉尼的线下活动墨尔本墨尔本的线下活动布里斯班布里斯班的线下活动线上在哪都能参加全部活动 →

    社群

    职业社区求职者互助学习小组找人一起学Discord在线交流群
企业会员下载 CareerOS
0
匠人学院 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
产品

CareerOS 与工具

  • CareerOS
  • 考证匠
  • 求职匠
  • 求职匠网页版
  • 求职匠分析报告
  • 求职匠桌面版下载
  • 我的求职报告
  • 购买报告次数
  • 求职匠账单
  • AI 工具箱
  • AI Skill 商城

会员与课程

  • 会员
  • AI 会员
  • AI Engineer VIP
  • 训练营
  • Training Camp
  • 看板学习
  • AI Builder 课程
  • MCP 课程
  • NotebookLM Workshop
  • Business Analyst 课程
  • Web全栈班
  • DevOps项目班
  • 数据工程全栈班
  • 数据分析项目班
  • 编程入门班
  • 算法集训营

求职服务

  • 毕业生求职
  • 澳洲毕业生求职
  • 中国毕业生求职
  • 马来西亚毕业生求职
  • 新加坡毕业生求职
  • 美国毕业生求职
  • 英国毕业生求职
  • 1v1 辅导
  • 职业辅导
  • BA和产品经理实习
  • 数据科学实习
  • 数据分析实习
  • Marketing实习
  • 简历修改
  • 面试指导
  • 岗位代投
  • 职位监控
  • LinkedIn代运营
  • LinkedIn人脉代加
内容库

学习方向

  • 全部学习方向
  • AI Engineer
  • Context Engineering
  • Vibe Coding
  • Prompt Master
  • AI Builder
  • AI 产品经理
  • Python 入门
  • AI 办公提效
  • AI 数据分析
  • AI 财务
  • AI 内容创作
  • AI 视觉创作
  • 前端开发
  • Hermes Agent
  • OpenClaw 本地智能体

互动 Lab

  • Prompt Lab
  • Frontend Lab
  • JavaScript Lab
  • Python Lab
  • AWS Lab
  • Azure Lab
  • LLM Lab
  • Git Lab

资料与指南

  • Wiki 知识库
  • 学习 Wiki
  • Cheat Sheets
  • 学习路线图
  • AI 路线图
  • 视频
  • 博客
  • 面试手册
  • 模拟考试
  • 免费资源

城市

  • 悉尼
  • 墨尔本
  • 布里斯班
  • 阿德莱德
  • 新加坡
  • 吉隆坡
  • 伦敦
  • 纽约
  • 旧金山
  • 洛杉矶
  • 西雅图
  • 多伦多
  • 温哥华

移民

  • 澳洲移民
  • 技术移民189/190/491
  • 雇主担保482/186/494
  • 投资移民188/888
  • 英国移民
  • 美国移民
  • 加拿大移民
  • 新加坡移民
  • 马来西亚移民
企业

企业服务

  • AI for Business
  • 企业门户登录
  • 企业培训
  • 实习合作
  • 招聘合作
  • Enterprise (EN)

Metatree AI Lab

  • Metatree AI Lab
  • AI 解决方案
  • 数字员工
  • 案例
  • Metatree AI Lab(英文)
  • AI Services(英文)
  • Digital Employee(英文)
  • Work(英文)

青少年 AI 教育

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

公司

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

帮助与条款

  • 常见问题
  • 服务条款
  • 隐私政策
  • 取消与退款政策
  • 网站地图

友情链接

  • CS Browser

联系

  • hello@jiangren.com.au
  • 0421-672-555

地址

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

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

首页学习AI课程考证
  1. 首页
  2. 学技能
  3. 资源中心
  4. 使用Make构建网站
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查看该作者的更多文章 →
← 上一篇理解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
查看全部文章 →

看完了,下一步

不知道下一步学什么?说说你的情况

说说你现在做什么、想去哪,按技能、证据、经验、表达、定位五类看差在哪、先补什么。不用登录。

对照我的情况
  • 技能按方向免费学 AIVibe Coding、AI 办公、Prompt、AI Engineer 等方向,按章节从入门学起。看全部学习方向 →
  • 定位按岗位看学习路线图前端、后端、数据、AI 等方向,按阶段列出要学的内容和先后顺序。看全部路线图 →
  • 表达练一次 AI 模拟面试选一个岗位开始模拟面试,练习把经历和项目讲清楚。去练一次 →

不确定下一步做什么?

带上这页的主题,对照你的情况看差在哪。

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

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

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