1

我有一个这样的目录结构：

+ src
  |
  | - modules
  |   |
  |   | - auth
  |   |   |
  |   |   | - auth.coffee
  |   |   | - auth.sass
  |   |   | - login.html
  |   |   | - logout.html
  |   |
  |   | - navigation
  |   |   |
  |   |   | - navigation.coffee
  |   |   | - navigation.sass
  |   |   | - navbar.html
  |   |  
  | - scripts
  |   |
  |   | - vendor
  |   |   |
  |   |   | - underscore.js
  |   |   | - angular.js
  |   |
  |   | - app.coffee
  |   | - router.coffee
  |
  | - styles
  |   |
  |   | - config.sass
  |   | - style.sass

我想要：

  1. 观看所有文件并在文件发生更改时执行第 2 步和第 3.coffee步.sass.html

  2. 编译.coffee和.sass文件。

    对于两者，我都需要指定依赖项（或：特定的顺序）。

    • 咖啡脚本
      • 编译scripts/vendor/underscore.js
      • 然后scripts/vendor/angular.js
      • 然后scripts/*.js
      • 然后modules/**/*.js
    • SASS
      • 编译styles/config.sass
      • 然后styles/style.sass
      • 然后modules/**/*.sass

  3. 收集所有.js,.css和.html文件并将它们组织到公用文件夹中。

这是所需的输出

+ public
  |
  | - partials
  |   |
  |   | - auth
  |   |   |
  |   |   | - login.html
  |   |   | - logout.html
  |   |
  |   | - navigation
  |   |   |
  |   |   | - navbar.html
  |   |  
  | - scripts
  |   |
  |   | - app.js
  |
  | - styles
  |   |
  |   | - app.css

我尝试了很多工具，但无法获得预期的结果。例如，Coffeescript 的Flour在编译方法中存在通配符问题。

我认为最好的事情是为我做所有事情的 Cakefile。我怎样才能做到这一点？

4

1 回答 1

1

首先，为什么要编译下划线或角度？只需链接到 CDN 上的缩小版本。您可以通过将它们与您的应用程序 js 打包在一起来获得更好的性能，对此我没有可靠的是/否答案，您必须进行研究。

我认为您应该能够使用grunt完成此操作。我的配置不是你想要的，但是： 

  # Project configuration.
  grunt.initConfig
    watch:
      coffee:
        files: ['app/assets/src/coffee/**/*.coffee', 'app/assets/src/coffee/*.coffee', 'test/*.coffee', '!**/screencaps/**', 'app/webserver.coffee']
        tasks: ['coffee:dev', 'replace', 'mochaTest']

  grunt.loadNpmTasks("grunt-contrib-coffee")
  grunt.loadNpmTasks('grunt-contrib-watch')

等等Grunt 使用 glob 进行文件模式匹配。对于你想做的事情，我会设置一个监视命令链：

  1. 留意变化src/modules/*.coffee
  2. 将所有咖啡编译（和可选的uglify）到 js，移动到public/scripts.
  3. 对 SASS 文件执行相同的操作。
于 2014-03-14T19:25:58.467 回答