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

【问题标题】：How Grunt watches children folder src, and putting output in same child dest?Grunt 如何监视子文件夹 src，并将输出放在同一个子 dest？
【发布时间】：2016-07-02 01:28:29
【问题描述】：

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

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

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

我的带有 grunt 的 Gruntfile.js 位于 www 文件夹，而我的 grunt concat 如下所示：

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

现在，您可能会看到问题，我收到错误“无法创建目录 C/wamp/www/** ...，我需要能够选择与找到 js 的位置相同的文件夹（以及以后的 css 和其他任务也是如此）。

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

如果这个问题被重复，我很抱歉，但我找不到答案。

【问题讨论】：

我认为每个项目文件夹都需要一个 concat 目标。
每个文件夹都要有办法设置...

标签： sass gruntjs directory subdirectory

【解决方案1】：

您不能对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
});

【讨论】：

感谢您的澄清。至少我知道现在无法完成，您给了我 1 个解决方法，我会尝试。

【解决方案2】：

第一

连接和丑化你的 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 ===============================
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']
      }
    }

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

【讨论】：