Grunt 连接所有 package.json 依赖项答案

【问题标题】：Grunt concat all package.json dependenciesGrunt 连接所有 package.json 依赖项
【发布时间】：2016-04-28 22:16:46
【问题描述】：

这是我第一次使用 grunt & npm。

我的 package.json 包含这个：

"dependencies": {
    "angular": "latest",
    "bootstrap": "latest",
    "jquery": "latest"
}

有没有办法告诉 grunt：“查看我所有的依赖项，加载正确的文件，并创建一个 JS 文件和一个用于分发的 CSS 文件”？

*这是因为我不想列出每个依赖项的所有分发文件。

【问题讨论】：

标签： npm gruntjs

【解决方案1】：

是的，您可以使用 grunt 模块，例如：concat、cssmin 和 sass，只需 1 分钟即可连接您的文件。

我会尝试给出一个小的解释，但您可以通过链接阅读更多内容并理解。

连接： https://www.npmjs.com/package/grunt-contrib-concat

cssmin: https://github.com/gruntjs/grunt-contrib-cssmin

萨斯： https://github.com/gruntjs/grunt-contrib-sass

关于 json 包：插入此依赖项：

"grunt-contrib-concat": "*",
"grunt-contrib-cssmin": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-uglify": "*",

在 gruntfile.js 上插入以下块：

加载任务：

var tasks = [


            ,'grunt-contrib-concat'
            ,'grunt-contrib-uglify'
            ,'grunt-contrib-sass'
            ,'grunt-contrib-cssmin'

    ];

对于 css 最小值：

cssmin: {
  target: {
    files: [{
      expand: true,
      cwd: 'release/css',
      src: ['*.css', '!*.min.css'],
      dest: 'release/css',
      ext: '.min.css'
    }]
  }
}

对于连接：

            var concat
            config.concat = concat = {};

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

用于丑化：

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

希望对你有所帮助。

【讨论】：