如何使用grunt将编译后的jade文件复制到目标文件夹 [英] How to copy compiled jade files to a destination folder using grunt

问题描述

对于我正在处理的单页应用程序，我有以下结构：

• dist
  
  
  
  • css
  
  
  • js
  
  
  • lib
  
  
  • 部分
  
  
  • index.html
  
  


• src
  
  
  
  • css
  li>
  
  • js
  
  
  • lib
  
  
  • views
    
    
    
    • / li>
      
    • index.jade
    
    
  
  

目录 dist 将被快递服务器用于为项目提供服务。我使用 grunt-contrib-clean ， grunt-contrib-copy ）来清理 dist 并复制 src / css ， src / js ， src / lib 到 dist 。

问题在于 src / views 。这个目录包含需要被编​​译成html文件的jade文件。编译后，我希望它们位于 dist 中（index.html位于dist根目录，partials位于子目录）。

目前我正在使用 grunt-contrib-jade 任务来编译和复制玉文件。我想将它们复制到dist，因为我不想将编译的html文件添加到源代码管理。但现在这是不可行的，因为你必须指定每个翡翠文件（现在只有少数，但会增长）：

  jade：{
 compile：{
 options：{
 pretty：true 
}，
 files：{
 // TODO make one line 
'dist / index.html'：['src / views / index.jade']，
'dist / partials / banner.html'：['src / views / partials / banner.jade ']，
'dist / partials / dashboard.html'：['src / views / partials / dashboard.jade']，
'dist / partials / navbar.html'：['src / views /partials/navbar.jade']，
'dist / partials / transfer.html'：['src / views / partials / transfer.jade'] 
} 
} 
 }，
  

有什么方法可以使用grunt-contrib-jade任务一个）带目录过滤器？像这样：

  jade：{
 compile：{
 options：{
 pretty：true 
 $ b $ d $ {
'dist'：['src / views'] 
} 
} 
} 
  
 
 
使用grunt 0.4版可以使用 grunt.file.expandMapping ：
  jade：{
编译：{
 options：{
 pretty：true 
}，
 files：grunt.file.expandMapping（['** / *。jade']，'dist / '，{
 cwd：'src / views'，
 rename：函数（destBase，destPath）{
返回destBase + destPath。替换（/\.jade$/，'.html'）; 
} 
}）
 
} 
}，
  
 
For a single page app that I'm working on, I have the following structure:


dist

css
js
lib
partials
index.html

src

css
js
lib
views

partials
index.jade




Directory dist will be used by the express server to serve the project. I have trivial grunt tasks (using grunt-contrib-clean, grunt-contrib-copy) for cleaning dist and copying src/css, src/js, src/lib to dist.

The problem lies with src/views. This directory contains jade files which need to be compiled to html files. After compilation I want them in dist (index.html in the dist root, partials as subdir).

At the moment I am using the grunt-contrib-jade task to compile and copy the jade files. I want to copy them to dist, since I don't want to add the compiled html files to source control. But now this is not really workable, since you have to specify every jade file (now there are only a few, but that will grow):
   jade: {
        compile: {
            options: {
                pretty: true
            },
            files: {
                // TODO make one line
                'dist/index.html': ['src/views/index.jade'],
                'dist/partials/banner.html': ['src/views/partials/banner.jade'],
                'dist/partials/dashboard.html': ['src/views/partials/dashboard.jade'],
                'dist/partials/navbar.html': ['src/views/partials/navbar.jade'],
                'dist/partials/transfer.html': ['src/views/partials/transfer.jade']
            }
        }
    },
Is there any way to use the grunt-contrib-jade task (or another one) with a directory filter? Like this:
   jade: {
        compile: {
            options: {
                pretty: true
            },
            dir: {
                'dist': ['src/views']
            }
        }
    }

解决方案
I ended up upgrading to grunt 0.4 (which causes some other problems, but that I'll be able to handle).

With grunt version 0.4 it is possible to use grunt.file.expandMapping:
    jade: {
        compile: {
            options: {
                pretty: true
            },
            files: grunt.file.expandMapping(['**/*.jade'], 'dist/', {
                cwd: 'src/views',
                rename: function(destBase, destPath) {
                    return destBase + destPath.replace(/\.jade$/, '.html');
                }
            })

        }
    },


                        
这篇关于如何使用grunt将编译后的jade文件复制到目标文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！