如何在Web项目中使用Makefile
来源:互联网 发布:淘宝首页psd模板教程 编辑:程序博客网 时间:2024/05/29 16:40
原文: http://oxy.fi/2013/02/03/how-to-use-makefiles-in-your-web-projects/
如何在Web项目中使用Makefile
每个创建好的项目都有各式各样的构建过程,不论它是大型的web应用,或者小型可重用的AMD组建。已有一大堆的工具可帮你自动的完成构建过程,很多流行的工具例如非常抢眼的工具 grunt。
不论如何,一些项目中grunt工具未必就是你需要的,有时候对你而言简单的shell脚本会比node.js的工具更具有生产力。今天我将非常简洁的介绍GNU Make工具,以及你如何使用它来创建很爽的自动化构建几个步骤。
makefile 的概念
一个 makefile 保存了一堆很有特殊目的的词目。正如我们相当喜爱UNIX,现在真是时候提醒你自己:“写一些词目来做一件事儿,并且把它做好”的规则。这些词目包括:
- 一个目标, 你知道
make install
吗? install 就是目标。它也可能是一个文件,例如:make bundle.min.js
。 - 依赖, 一些由目标所依赖的一些可选的文件。
- 以及最后运行的命令。
当你创建词目的时候,要尽可能的简单,同时要注意灵活性。例如,你想默认最小化一些预定义的文件,但偶尔你想配置其他的一些文件给makefile,并且弄出这些命令。
创建灵活的目标
为了更具灵活性,预定义的目标依赖可以被命令行列出的覆盖掉,要把依赖列表写在目标名称的后边。
$ make min index.js plugins.js$ make min // 默认依赖 index.js
还有一种常见玩法,就是在makefile文件中把路径设置成变量,然后允许用户像如下的方式来覆盖:
$ make JSMIN=./bin/jsmin min
实现 min 目标
OK,那么我们开始创建一个Makefile。
一个目标的格式是:
<target>: <dependencies> commands...
As I mentioned earlier, the target can be a general name or a file, for now we’ll keep to names such as min or install. Dependencies are a space separated list of files you want to process or of other targets you want to run. Let’s create our first target.
min: index.js plugins.js uglify --output scripts.min.js $^
he $^
is a variable which holds a space separated list of the dependencies. It will be expanded into: uglify --output scripts.min.js index.js plugins.js
.
Now this is entry is somewhat flexible as you could run make min plugins.js
to replace the default dependencies and only minimize plugins.js
. However, let’s refactor this into something prettier.
A web project makefile
First lets define some variables.
# ?= means the variable can be overridden from the command line like:# make UGLIFY=./node_modules/.bin/uglify minUGLIFY ?= uglifyOUTPUT ?= scripts.min.jsJS_FILES := index.js plugins.jsmin: $(JS_FILES) $(UGLIFY) --output $(OUTPUT) $^
Now let’s split out the concat task so we can use it separately
UGLIFY ?= uglifyOUTPUT ?= scripts.min.jsJS_FILES := index.js plugins.jsmin: $(JS_FILES) make concat $(JS_FILES) $(UGLIFY) --output $(OUTPUT) $(OUTPUT)concat: $(JS_FILES) cat $^ > $(OUTPUT)
Now we’re getting somewhere, however the min task looks really ugly. Let’s put in some awesome sauce.
UGLIFY ?= uglifyOUTPUT ?= script.jsJS_FILES := index.js plugins.js# For each file in JS_FILES, replace .js by .min.js and run it as the target# with the original as a dependency.# In plain English, iterate over each file and minimize as well as rename it.min: $(JS_FILES:.js=.min.js)# $@ is the target and $< is the dependency.%.min.js: %.js $(UGLIFY) --output $@ $<concat: $(JS_FILES) cat $^ > $(OUTPUT)
You better let that sink in for a bit. Next up is tying everything up in a nice bow.
UGLIFY ?= uglifyDIST ?= distOUTPUT ?= $(DIST)/script.jsJS_FILES := index.js plugins.js# When you run make without a target, the first entry is the one to run,# usually this is named `all` by convention.all: concat min# Rather than minifying every file, default to only minifying the final output.min: $(OUTPUT:.js=.min.js)# $@ is the target and $< is the dependency.# When you put a `@` in front of a command, the stdout will be suppressed,# making for a cleaner terminal.%.min.js: %.js @$(UGLIFY) --output $@ $<concat: $(JS_FILES) @cat $^ > $(OUTPUT)# It's useful to have a cleanup task as well.clean: @rm -f $(DIST)/*# Phony targets are targets that do not accept dependencies, it's good# practice to define this as targets might have the same name as files from time# to time and therefore create confusion. Also it's a small performance# improvement..PHONY: clean all
Alright, that’s our makefile
.
How to use it
Concat and minify index.js and plugins.js into dist/script.min.js (these all do the same thing).
$ make$ make all$ make concat min
Specify the location of uglify
$ make UGLIFY=./node_modules/.bin/uglify
Concat some other files
$ make OUTPUT=temp.js concat js/*
Minify all files but put them in a separate directory
$ make DIST=minified min js/*
Clean up all the distribution files created
$ make clean
- 如何在Web项目中使用Makefile
- 如何在eclipse中建web项目
- 在Makefile中使用$$
- log4j日志在web项目中使用
- 在Java Web 项目中使用HBase
- 在web项目中使用MarkDown组件
- 如何在java web项目后端项目中获取路径
- 如何在web项目中使用jfreechart和显示硬盘上指定路径上的图片
- Servlet开发(一)如何在Myeclipse 中使用tomcat(配置tomcat,发布web项目)
- 如何在cocos creator web项目中使用跨域图片
- 在Web中如何使用Windows控件?
- 在Web中如何使用Windows控件?
- 在Web中如何使用Windows控件?
- log4j 如何在Java web中使用
- 如何在web应用中使用Axis2
- 如何在项目中使用连接池
- 在项目中如何使用外观模式
- 如何在 Swift 项目中使用 CocoaPods
- SQL - 拷贝列数据
- Objective-C 中 判断 NaN
- iOS 学习开发网站
- 怎样在控制台或者日志打印输出JDBC执行的sql语句
- Java链表实现堆栈
- 如何在Web项目中使用Makefile
- isspace()
- Matlab Intro - Image Structure
- width:auto和width:100%的区别
- python 抓取lofterart动态页面
- C++中的locale设置
- UVa 524 - Prime Ring Problem(回溯)
- C#中listview的image添加问题和item双击事件
- Python设计模式——责任链模式