2

(免責事項: 私は UX デザイナーであり、これが初めての「自作」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 を取得するだけで、サブディレクトリは取得しません。私はかなり実験してグーグルで検索しましたが、何もうまくいきません。

編集：これが私の実際のメイクファイルです

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 などがあるため、ディレクトリも除外する必要があります。

私は jade --help を実行しましたが、サブディレクトリと除外、および人間の作成については何もありません。私が見ることができる他の場所はありますか、または以前に誰かがこれに遭遇したことがありますか?

4

2 に答える 2

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 は、ファイルがいつ変更されたかに基づいて、不要な再構築を回避するためのものです。コマンドを実行するたびに常にすべてを再構築したい場合は、メイクファイルではなくシェルスクリプトを記述してください。

到着予定時刻:

本当に最も単純なバージョンが必要な場合は、これを試してください (繰り返しますが、私は jade を使用したことがないので、どのように機能するかわかりませんが、jade ファイルのリストが必要な場合はこれで機能するはずです):

# 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`

到着予定時刻:

出力例が間違っているようです: 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 ファイル) の代わりで$@あり、ターゲット ファイル (この場合は .html ファイル) です。 ）。変数$(@D)は、ターゲット ファイルのディレクトリです。

于 2013-07-29T16:52:21.310 に答える
1

私は多くのプロジェクトで Node で Jade を使用しているため、jade フォルダーをクロールし、構造を宛先フォルダーに出力する単純な (それほどスマートではありませんが) スクリプトを作成しました。これをいくつかのプロジェクトで使用したので、CLI を使用してソース フォルダーと宛先フォルダーを入力しました。コーヒースクリプトのコードは次のとおりです。

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

補足として、通常、npm を直接使用してプロジェクトをビルド/自動化scriptsしpackages.jsonます。例えば：

"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. お役に立てれば ：）

于 2015-02-10T17:47:25.220 に答える