Grunt如何监视子文件夹src，并将输出放在相同的子dest

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与grunt在www文件夹，我的grunt concat，是这样的:

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

现在，你可能看到问题了，我得到错误" can 't create directory C/wamp/www/**…"，我需要能够选择相同的文件夹，因为它发现js(以及后来的css和其他任务)。

需要最简单的解决方案，我计划使用concat, watch, uglify, sass(也欢迎sass的解决方案)。

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

Answer 1

您不能对dest值使用globing模式，因为globing是用于匹配模式的。对于每个项目子文件夹，您需要一个单独的src -> dest映射。有几种方法可以做到这一点，但我将使用文件对象格式。假设项目子文件夹名为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
});

Answer 2

First

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

无论如何，我希望这对你的开始有帮助。