Grunt 如何监视子文件夹 src，并将输出放在同一个子文件夹中？

Question

我是 NodeJs 和 Grunt 的新手，我想问一个可能已经回答的问题，但我无法理解解决方案，或者找不到解决方案。

所以，我有一个 www 文件夹，其中包含许多带有项目的子文件夹。每个项目里面都有相同的文件夹，

--css/style.css
--sass/style.scss
--js/script.js + /1.js + /2.js 
--build/script.js
--build/style.css

我的 Gruntfile.js with grunt 在 www 文件夹中，我的 grunt concat 是这样的：

grunt.initConfig({
concat: {
  dist: {
    src: ['**/js/1.js', '**/js/2.js', '**/js/script.js'],
    dest: '**/build/script.js'
  },
},
});

现在，您可能会看到问题，我收到错误消息“无法创建目录 C/wamp/www/** ...，我需要能够 select 与它在哪里找到了 js（以及后来 css 和其他任务）。

需要最简单的解决方案，我打算使用concat、watch、uglify、sass（也欢迎sass的解决方案）。

如果重复这个问题，我深表歉意，但我找不到答案。

Answer 1

第一个

合并和丑化你的 js:

    concat.dev = {
     files: {
       "public/myapp.development.js": [
         "with-bootstrap/public/js/vendor", "with-bootstrap/public/js/**/*.js"
       ]
     }
   };


   //Uglify ===============================
   config.uglify = {
     dist: {
       options: {
         sourceMap: "public/myapp.production.js.map"
       },
       files: {
         "public/myapp.production.js": ["public/myapp.development.js"]
       }
     }
   }

和你的sass:

//Sass ===============================
var sass;
config.sass = sass = {};

//distribution
sass.dist = {
  options: {
    style: "compressed",
    noCache: true,
    sourcemap: 'none',
    update: true
  },
  files: {
    "<%= src.distFolder %>": "<%= src.sassMain %>"
  }
};

//development env.
sass.dev = {
  options: {
    style: "expanded",
    lineNumber: true,
  },
  files: {
    "<%= src.devFolder %>": "<%= src.sassMain %>"
  }
};

在那种情况下观察你的变化我只看 sass 目录：

 //Watch ===============================
    config.watch = {
      scripts: {
        files: ["<%= src.libFolder %>", "<%= src.sassFolder %>"],
        tasks: ["dev", "sass:dist"]
          //,tasks: ["dev",'sass:dist']
      }
    }

无论如何，我希望对您有所帮助。

Answer 2

您不能为 dest 值使用通配模式，因为通配是用于匹配模式。 each 项目子文件夹需要单独的 src -> dest 映射。有几种方法可以做到这一点，但我会使用 Files Object Format。假设项目子文件夹名为 proj1/ 和 proj2/，配置如下所示：

concat: {
    dist: {
        files: {
            'proj1/build/script.js': 'proj1/js/*.js',
            'proj2/build/script.js': 'proj2/js/*.js'
        }
    }
}

如果您要继续添加项目子文件夹，动态构建 concat 配置可能有意义：

var project_dirs = ['proj1', 'proj2'];

var concat_config = {
    dist: {}
};

concat_config.dist.files = project_dirs.reduce(function (memo, dir) {
    var src = dir + '/js/*.js';
    var dest = dir + '/build/script.js';

    memo[dest] = src;

    return memo;
}, {});

grunt.initConfig({
    concat: concat_config
});

Grunt 如何监视子文件夹 src，并将输出放在同一个子文件夹中？

How Grunt watches children folder src, and putting output in same child dest?

directory

sass

subdirectory

gruntjs