Make 命令构建网站教程及示例

一、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变量重新赋值为,优先在 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

时间: 2024-10-28 07:24:20

Make 命令构建网站教程及示例的相关文章

第一步:规划网站,本教程将以图示为例构建网站

1.规划网站,本教程将以下图为例构建网站.   主要由五个部分构成: 1.Main Navigation 导航条,具有按钮特效. Width: 760px Height: 50px 2.Header 网站头部图标,包含网站的logo和站名. Width: 760px Height: 150px 3.Content 网站的主要内容. Width: 480px Height: Changes depending on content 4.Sidebar 边框,一些附加信息. Width: 280px

理解 Ajax 及其工作原理,构建网站的一种有效方法

ajax Ajax 由 HTML.JavaScript 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 -- 从总体概述到细节的讨论 -- 使高效的 Web 开发成为现实.他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象. <--START RESERVED FOR FUTURE USE INCLUDE FILES--><--

【Best Practice】基于阿里云数加·StreamCompute快速构建网站日志实时分析大屏

本文偏向与实操层面的为大家介绍,如何基于阿里云数加StreamCompute.DataV快速构建网站日志实时分析. [什么场景适合用流计算] 流计算提供了针对流式数据实时分析的一站式工具链,对于大量流式数据存在实时分析.计算.处理的逻辑可以考虑通过流计算该任务.举例如下: 1. 针对实时营销活动,需要实时获取活动流量数据分析以了解活动的营销情况,此时可以上流计算. 2. 针对物联网设备监控,需要实时获取设备数据进行实时灾难监控,此时可以上流计算. 3. 对于手机APP数据实时分析,需要实时了解手

快速用Discuz搭建论坛网站教程

Discuz! 是全球成熟度最高.覆盖率最大的论坛软件系统之一.自 2001 年 6 月面世以来,Discuz! 已拥有 15 年以上的应用历史和 200 多万网站用户案例.目前,Discuz! 已经发展成为一个以社区为基础的专业建站平台,让论坛(BBS).社交网络(SNS).门户(Portal).群组(Group).开放平台(Open Platform)应用充分融合于一体,帮助网站实现一站式服务. 适用对象 适用于熟悉 ECS,熟悉 Linux 系统,刚开始使用阿里云进行建站的用户. 基本流程

JS基础教程——正则表达式示例(推荐)

正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字.[\s*]表示空格或者*号. {}一般用来表示匹配的长度,比如 \s{3} 表示匹配三个空格,\s[1,3]表示匹配一到三个空格. (0-9) 匹配 '0-9′ 本身. [0-9]* 匹配数字(注意后面有 *,可以为空)[0-9]+ 匹配数字(注意后

网站优化 通过内容和链接构建网站

网站优化 通过内容和链接构建网站 通过内容构建网站 对于个人站长来说站长的维护与更新往往都是以个人为主,也有小型团队组合而成的.由于个人站长的精神和时间有限,在内容的更新上所获取的资源,或多或少都会有些紧缺的,特别是对于站长除了对网站内容进行构建的同时,也要兼顾网站外部的发展.因此对于网站需要大部分原创内容来说,需要的精神和时间的要求就会更高更强,特别是部分兼职的站长来说.所以我们要从本质上进行一些了解,搜索引擎本身就是以数据库教程的形式,在搜索引擎收录的网站都被放到搜索引擎的数据库中,并且对较

【Best Practice】基于阿里云数加·MaxCompute及Quick BI构建网站用户画像分析

前文背景:[Best Practice]基于阿里云数加·StreamCompute快速构建网站日志实时分析大屏   开通阿里云数加产品 前提条件 为了保证整个实验的顺利开展,需要用户使用开通相关产品及服务,包括DataHub.MaxCompute.AnalyticDB.Data IDE.Quick BI.      业务场景 数据来源于网站上的HTTP访问日志数据,基于这份网站日志来实现如下分析需求: n   统计并展现网站的PV和UV,并能够按照用户的终端类型(如Android.iPad.iP

运营之前先磨刀:构建网站环境

在策划和开发网站和网站的栏目的时候,作为日后的运营管理者,我认为有非常必要考虑这个问题--构建网站的环境.并且,如果有人问我,网站运营的第一步是什么,我会很坚决的告诉他:先别急着做推广,先做好内功,把自己的网站环境按照你的业务方向来整理一下吧. 通俗点说,网站的环境就是网站的气氛.是在给以后网站拥有的所有业务先磨刀的行为,可以说磨刀不误砍材功.一个好的网站环境,能够起到的作用恐怕要远远比表面的强大而重要. 再说俗一点,你的网站是一个姑娘,而网站环境就是你的内涵和修养,想嫁给心仪的男人,获得一生的

努力构建网站基础 助力网站冲出衰败桎梏(上)

随着互联网技术的不断成长,现在建立一个网站就跟喝一杯水差不多,越来越多的人群涌入建站大军,这导致了做网站的站长竞争压力越来越大,竞争程度越来越猛.部分缺乏核心基础的网站也逐渐的衰退了,或许在几年以前大家都听说过赫赫有名的雅虎吧,而现在呢?就连雅虎都逐渐淡出了我们的视线,互联网巨头尚是如此,我们的普通网站又能如何,一些缺乏核心基础的网站要么被竞争对手远远的甩在身后,要么就彻底失败.这告诉我们:建站想要成功就必须努力的构建网站基础,与其他的网站相抗衡. 但是一个网站想要构建网站的基础核心却非常不容易