使用Jade - 需要一个makefile命令将源Jade编译为Public目录并维护源目录结构

时间:2013-07-29 16:11:38

标签: makefile pug

(免责声明:我是一名用户体验设计师,这是我的第一个“自制”makefile)

我想在我的makefile中添加一行来获取我的src / jade目录的内容,并在public /中将其输出为html。我的makefile位于项目目录中包含src和public的两个目录之上。所以我想要的是:

src/jade
  |--Enterprise/index.jade
  |--SmallBusines/index.jade
  |--Public Sector/index.jade

得到

public
  |--Enterprise/index.jade
  |--SmallBusines/index.jade
  |--Public Sector/index.jade

我无法弄清楚如何让它抓取src / jade中的子目录。这就是我所拥有的:

jade -P -p . -o public src/jade/

这只需要src / jade中的东西,但没有子目录。我已经进行了很多实验和Google搜索,但没有做到这一点。

编辑: 这是我的实际makefile

all: 
  mkdir -p public
  make jade
  make coffee
  make less
  make statics

jade: 
  jade -P -p . -o public src/jade/

coffee: 
  coffee --compile --output public/js src/coffee

less: 
  lessc --strict-imports src/less/styles.less public/css/styles.css

statics:
  cp -a src/less/img public/css/
  cp -a src/font public/
  cp -a src/coffee/bootstrap.min.js public/js/

clean:
  rm -rf public

此外 - 一旦我弄明白,我将需要排除目录,因为src / jade将包含导入到网站的实际“页面”而不是页面本身的/ includes和/ blocks。< / p>

我已经完成了jade --help,并且那里没有关于子目录和排除,以及man make的内容。有没有其他我可以看的地方,或者之前有人参与其中?

2 个答案:

答案 0 :(得分:1)

我对jade一无所知,但如果它需要一个.jade文件并生成一个.html文件,那么你可能想要这样的东西:

JADE := jade
JADEFLAGS := -P -p .
SRCDIR := src/jade
HTMLDIR := public

JADEFILES := $(shell find $(SRCDIR) -type f -name \*.jade)
HTMLFILES := $(patsubst $(SRCDIR)/%,$(HTMLDIR)/%,$(JADEFILES))

.PHONY: all
all: $(HTMLFILES)

$(HTMLDIR)/%.html : $(SRCDIR)/%.jade
        $(JADE) $(JADEFLAGS) -o $(HTMLDIR) $<

如果按照之前的方式进行操作,则每次运行make时都会创建所有输出文件,无论更改内容如何。如果这就是你想要的,那么使用make就是无用的复杂功能。 Make是为了避免不必要的重建,基于文件何时发生变化;如果你想在运行命令时一直重建所有东西,只需编写一个shell脚本,而不是一个makefile。

ETA:

如果你真的只想要最简单的版本,试试这个(再次,我从来没有使用过玉,所以我不确定它是如何工作的,但如果它需要一个玉文件列表,这应该有效):

# Use the UNIX find(1) command to locate all the jade files under src/jade
jade:
        jade -P -p . -o public `find src/jade -name \*.jade`

ETA:

看来你的示例输出是错误的:它显示jade会生成像foo.jade这样的文件,但这不对:jade似乎生成像foo.html这样的文件。如果jade本身不维护目录结构,那么你需要更接近我原来的建议。我会尝试简化一下:

SRCDIR := src/jade
HTMLDIR := public

# Find all the .jade files, using UNIX find(1)
JADEFILES := $(shell find $(SRCDIR) -type f -name \*.jade)

# Convert all the .jade files to .html in the output directory
HTMLFILES := $(patsubst $(SRCDIR)/%.jade,$(HTMLDIR)/%.html,$(JADEFILES))

# A target that depends on all the .html files we will generate
.PHONY: jade
jade: $(HTMLFILES)

# A pattern rule that shows how to build a single .jade file
# into a single .html file
$(HTMLDIR)/%.html : $(SRCDIR)/%.jade
        jade -P -p . -o $(@D) $<

要了解模式规则,您应该阅读“自动变量”中的GNU make手册部分,但基本上$<代表第一个先决条件(在本例中为.jade文件)和{{1}是目标文件(在这种情况下是.html文件)。变量$@是目标文件的目录。

答案 1 :(得分:1)

由于我在许多项目中使用Jade with Node,因此我制作了一个简单的(虽然不是那么聪明)脚本,它可以抓取玉器文件夹并将结构输出到目标文件夹。由于我在几个项目中使用了这个,我通过CLI输入源文件夹和目标文件夹。 coffeescript代码如下:

fs = require 'fs'
path = require 'path'
exec = require('child_process').exec

# Get base from cli
jadePath = process.argv[2]
base = process.argv[3]

_build = (dir) ->
  files = fs.readdirSync dir
  for f in files

    if f == path.basename __filename
      continue

    fullPath = path.join(dir, f)
    stat = fs.statSync fullPath

    if stat.isDirectory()
      try
        fs.mkdirSync path.join(base, fullPath)
      _build fullPath
    else if path.extname(f) == '.jade'
      # Compile jade
      dirName = path.join base, (path.dirname fullPath)
      dirName = dirName.replace jadePath, ''
      dirName = dirName.replace '//', '/'
      console.log "Compiling jade file '#{fullPath}' to directory #{dirName}"
      exec('jade -o ' + dirName + ' ' + fullPath)

# Start process with path from cli
_build jadePath

作为附注,通常通过scripts中的packages.json会话直接使用npm构建/自动化我的项目。例如:

"scripts": {
    "build:js": "coffee -cb -o www/js/ www/_src/coffee/",
    "build:html": "coffee run_jade.coffee www/_src/jade/ www/templates/",
    "build:css": "sass www/_src/sass/style.scss www/css/style.css",
    "build": "npm run build:js && npm run build:html && npm run build:css",
    "watch": "watch 'npm run build' www/_src/",
    "test": "karma start test/karma.conf.coffee"
  }

然后如果我想构建我的html,我可以简单地npm run build:html。希望这会有所帮助:)