Question

我想使用grunt uglify目录中的所有.js文件。但问题是，有些文件夹以.js结尾。我相信grunt-uglify无法区分以.js结尾的文件夹。此外，.js文件夹中还有.js文件。谁能告诉我该怎么做？我是新手

我的项目结构 - ＆gt;

MyProject的/应用/资产/ LIB / amcharts / DIST / amcharts /插件/出口/库/ FileSaver.js

其中FileSaver.js是包含.js文件的文件夹。它在FileSaver.js

失败了

的package.json

{
  "name": "App",
  "description": "App",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
  "express": "3.x",
  "grunt-contrib-copy": "^1.0.0"
},
 "devDependencies": {
   "grunt": "^0.4.5",
   "grunt-cli": "^1.2.0",
   "grunt-contrib-clean": "^1.1.0",
   "grunt-contrib-copy": "^1.0.0",
   "grunt-contrib-jshint": "^1.1.0",
   "grunt-contrib-requirejs": "~0.4.1",
   "grunt-contrib-symlink": "^1.0.0",
   "grunt-contrib-uglify": "^2.3.0",
   "grunt-contrib-watch": "^1.0.0",
   "grunt-exec": "^3.0.0",
   "grunt-git": "^0.3.7",
   "grunt-text-replace": "^0.4.0",
   "jasmine-core": "^2.8.0"
  },
  "scripts": {
    "test": "grunt travis --verbose"
 }
  }

我的GruntFile.js

module.exports = function (grunt) {

grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
    uglify :{
        files :{
            'build/dest.js': 'app/*.js'
        }
    }

});
  grunt.loadNpmTasks('grunt-contrib-uglify');

};

Answer 1

首先，（如评论中所述），命名带有.js后缀的文件夹是不好的做法。如果可以，您确实需要更改项目文件夹命名法。但是，如果这不可行，则可以grunt-contrib-uglify忽略名称以.js结尾的文件夹。

这需要通过使用自定义帮助函数（即下面示例gist中的uglify）动态生成configureUglify任务的配置对象。结果配置与uglify文档中显示的this example非常相似，其中每个.js文件都在Array中定义。主要区别在于，我们不是手动定义每个文件路径，而是动态生成它。

<强> Gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({
    uglify : {
      // <--  // Intentionally empty, will be auto generated.
    }
  });

  /**
   * Helper function creates config object for uglify Task.
   */
  function configureUglify() {
    var glob = 'app/**/*.js',
      config = {},
      jsFiles = [];

    grunt.file.expand({ filter: 'isFile' }, glob).forEach(function (filePath) {
      jsFiles.push(filePath)
    });

    config.target = {
      files : {
        'build/dest.js' : jsFiles
      }
    }

    grunt.config('uglify', config);
    grunt.task.run(['uglify']);
  }

  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('uglifyJs', configureUglify);
  grunt.registerTask('default', ['uglifyJs']);
};

备注

configureUglify辅助函数（上图）利用grunt.file.expand迭代通过glob模式'app/**/*.js'找到的每条路径。

{ filter: 'isFile' }部分确保仅处理以.js结尾的文件的路径（即文件夹FileSaver.js或名称以.js结尾的任何其他文件夹简单地忽略了。）

globbing模式'app/**/*.js'会找到存储在.js目录中的所有app个文件，包括在子文件夹中找到的所有文件。如果您只想 uglify 存储在名为FileSaver.js的文件夹中的文件，请将glob模式更改为：

var glob = 'app/assets/lib/amcharts/dist/amcharts/plugins/export/libs/FileSaver.js/**/*.js'

使用提供的$ grunt示例gist通过命令行运行Gruntfile.js将导致名为dest.js的单个文件保存到build文件夹/目录。

重要

将多个文件合并为一个.js文件（例如dest.js）时，组合文件的顺序对于确保应用程序正常运行通常很重要。因此，您可能会发现在Gruntfile.js中明确定义路径数组（而不是如上所述动态，这不能保证正确的顺序），可以更好地满足您的要求。例如：

grunt.initConfig({ uglify: { my_target: { files: { 'build/dest.js': [ 'app/assets/lib/foo.js', 'app/assets/lib/amcharts/dist/amcharts/plugins/export/libs/baz.js', 'app/assets/lib/amcharts/dist/amcharts/plugins/export/libs/FileSaver.js/a.js', 'app/assets/lib/amcharts/dist/amcharts/plugins/export/libs/FileSaver.js/b.js', 'app/assets/lib/amcharts/dist/amcharts/plugins/export/libs/FileSaver.js/c.js' ] } } } });

此外，通常单个结果的uglified / minified .js文件以.min.js后缀命名 - 这只是一般的好习惯。因此，您可以考虑将'build/dest.js'更改为'build/dest.min.js'

uglify无法区分以.js结尾的文件夹和文件

1 个答案: