Question

我希望我的Gruntfile使用我的package.json来读取我的依赖项（通过npm安装）并将我的所有javascript文件连接成一个文件然后我可以缩小。目前我只有一个生产依赖项，但我计划添加其他项目，我想要一种让grunt弄清楚我已经添加了一个并将其包含在构建路径中的方法。

这是我的package.JSON：

{
  "name": "template",
  "version": "1.0.0",
  "description": "A template written by author",
  "main": "index.html",
  "author": "author",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-uglify": "^0.8.0",
    "grunt-contrib-watch": "^0.6.1"
  },
  "dependencies": {
    "d3": "^3.5.5"
  }
}

这是我的咕噜文件

module.exports = function(grunt) {
  // Project configuration.

  grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     config: grunt.file.readJSON('config.json')
  });

  // Load the plugin that provides the watch tasks.
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.config('watch', {
        all: {
            files: ['src/**/*'],
            // files: '<%= config.sourceFiles %>',
            tasks: ['change'],
            options: {
                livereload: true,
                spawn: false
            }
        }
  });

   // load the plugin that watches the connect tasks.
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.config('connect',{
        local: {
            options: {
                port: 3335,
                hostname: 'localhost',
                livereload: true
            }
        }
  });

  //Load the plugin that lints my JavaScript
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.config('jshint',{
        all: '<%= config.lintFiles %>',
        options:{
          curly: true,
          immed: true,
          newcap: true,
          noarg: true,
          sub: true,
          boss: true,
          eqnull: true
        },
        globals: {}
  });

  // Load the plugin that provides the concat tasks.
  grunt.loadNpmTasks('grunt-contrib-concat');

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

  // var allDependencies = [];
  // for (var i = 0; i < pkg.dependencies.length; i++){
  //   console.log('i', i);
  // }
  console.log('1')
  console.log('<%= pkg %>')
  console.log('2')


  // Load the plugin that provides the uglify tasks.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // defining my uglify task
  grunt.config('uglify', {
      options: {
        banner: '/*\n*    ©<%= pkg.author%>\n*    <%= pkg.name %>\n*    <%= grunt.template.today("yyyy-mm-dd HH:mm:ss") %> \n*/\n'
      },
      build: {
        src: 'build/concat.js',
        dest: 'build/<%= pkg.name %>-build.min.js'
      }
  });


  // Default task(s).
  var defaultTasks;
  defaultTasks = ['lint', 'concat', 'uglify'];
  var changeTasks;
  changeTasks = ['lint', 'concat'];

  var buildTasks = ['lint', 'concat', 'uglify'];

  grunt.registerTask('change', changeTasks);
  grunt.registerTask('server', ['connect:local', 'watch:all']);
  grunt.registerTask('lint', ['jshint']);
  grunt.registerTask('build', buildTasks);

  grunt.registerTask('default', defaultTasks);

};

你会注意到我有几个我不希望包含在我的生产代码中的DevDependancies。我试图找到一种方法来动态查找所有依赖项并将它们添加到我的concat路径但我找不到方法。任何帮助都会很精彩。

Answer 1

基于这个答案：How to pass in package.json array to grunt.js

您应该能够读取package.json文件（并将其作为普通的json对象读取，对吧？）。然后只需访问依赖项的属性，获取每个包的名称。

我想难以理解的是，每个软件包在不同的地方都有自己的资产，这些资产通常不是标准的（或者可靠的标准）。即：angular/angular.min.js vs angular-ui-router/release/angular-ui-router.min.js（注意添加了插入文件夹'release'）。

这只是我最初的印象。

咕噜咕噜地构建一个包含所有依赖项的javascript文件（从node_modules读取）

1 个答案: