Question

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

+ 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

我想：

观看所有.coffee，.sass和.html文件，并在文件发生变化时执行第2步和第3步
编译.coffee和.sass个文件。

对于我需要指定依赖关系（或：特定排序）。
- 的CoffeeScript
  - 编译scripts/vendor/underscore.js
  - 然后scripts/vendor/angular.js
  - 然后scripts/*.js
  - 然后modules/**/*.js
- SASS
  - 编译styles/config.sass
  - 然后styles/style.sass
  - 然后modules/**/*.sass
收集所有.js，.css和.html个文件，并将其整理为公共文件夹。

这是所需的输出

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

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

我认为最好的事情是Cakefile，它可以为我做任何事情。我怎么能做到这一点？

Answer 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 uses glob for file pattern matching。对于您想要做的事情，我设置了一系列监视命令：

注意src/modules/*.coffee
将所有咖啡编译（并且可选地uglify）js，移至public/scripts。
对SASS文件执行相同操作。

按特定顺序在多个文件夹和供应商javascript文件中查看和编译coffeescript，还可以组织sass和html模板

1 个答案: