天道酬勤,学无止境

Dynamic Mapping and Concat with Grunt Uglify

I'm trying to use dynamic mapping AND concat Javascript files with Grunt Uglify.

I have the following which is not working correctly.

Here is my folder structure:

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test (output folder)

Here is what I'm expecting:

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test
        |- billing-one.min.js (this file includes billing-one.js AND custom.js)
        |- billing-two.min.js (this file includes billing-two.js AND custom.js)

This is what I'm currently getting:

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test
        |- bills
            |- billing-one.min.js (this file includes just billing-one.js)
            |- billing-two.min.js (this file includes just billing-two.js)
        |- account 
            |- custom.min.js (this file includes just custom.js)

It is not including the custom.js file but instead creates a 2 folders test/account/custom.min.js 'test/bills/billing-one.js' - see above

options: {
    beautify: true,
    mangle: false,
    compress: false,
    preserveComments: 'all'
},
files: [
  {
    expand: true,     // Enable dynamic expansion.
    cwd: 'javascript/',      // Src matches are relative to this path.
    src: [[bills/*.js'], 'account/custom.js'], // Actual pattern(s) to match.
    dest: 'test/',   // Destination path prefix.
    ext: '.min.js',   // Dest filepaths will have this extension.
    extDot: 'first'   // Extensions in filenames begin after the first dot
  },
],

I want all the Javascript files within the bills/ folder to contain custom.js

So if there are 2 files: bills/billing-one.js bills/billing-two.js

I would expect test/ folder to include

test/billing-one.min.js (this file would contain billing-one + custom.js) test/billing-two.min.js (this file would contain billing-two + custom.js)

I don't want to hard code the file names in. If more files are added tobills/ folder the should be concat and output to the test/ folder.

Any help much appreciated.

UPDATE SINCE ANSWER ACCEPTED:

Use the follow updated code to make sure this works as intended - otherwise you'll run into errors when running GRUNT.

I did try adding this to the answer by submitting an edit for review. But it got rejected, twice, by the all knowing all superior mods... when in fact it's a valid input and improves on the answer given. Note the [], cwd and src changes.

files: [{
    expand: true,
    cwd: 'javascript/bills/',
    src: ['*.js'],
    dest: 'test/',
    ext: '.min.js',
    extDot: 'first'
}],

评论

You can use the banner property of grunt-contrib-uglify to append the content. https://github.com/gruntjs/grunt-contrib-uglify#banner

Here is the grunt configuration:

grunt.initConfig({
    uglify: {
      options: {
        banner: grunt.file.read('./javascript/account/custom.js'),
        beautify: true,
        mangle: false,
        compress: false,
        preserveComments: 'all'
      },
      files: {
        expand: true,
        cwd: 'javascript/',
        src: ['bills/*.js'],
        dest: 'test/',
        ext: '.min.js',
        extDot: 'first'
      },
    }
  });

In the above configuration every file in the bills folder will get the content of custom.js configured in the banner property.

I hope it helps you.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Is 'El Capitan's' rootless breaking old grunt configs?
    After migrating to El Capitan, it seems users are experiencing an issue with grunt installations, possibly related to the rootless changes of El Capitan. In particular, running the grunt --force command results in EPERM errors. The workflow is as follows: Assuming npm has been installed, navigate to the grunt directory with package.json and gruntfile.js and invoke grunt: grunt --force Example Gruntfile.js file contents: module.exports = function(grunt) { // All configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { // Configuration for concatenating
  • Grunt插件,用于资产版本控制(Grunt plugin for assets versioning)
    问题 我正在寻找一个grunt插件,它将自动将对html文件中的静态资产(js / css)的引用更改为: <link rel="stylesheet" type="text/css" href="style.css?v=12345678" /> <script src="script.js?v=12345678"></script> 我搜索了gruntjs.com/plugins->“ version”,但似乎所有这些文件都更改了文件的实际版本,而不是对其的引用。 我想念它吗? 有可以执行此任务的插件吗? 回答1 为此,我使用grunt-filerev进行版本控制,并使用grunt-usemin进行源文件中引用的自动更新。 这两个模块可以很好地协同工作(usemin用filerev提供的映射替换引用) 希望这可以帮助 编辑:一些代码示例(仅向您显示您的案例中有趣的部分): 我仅在打包我的应用程序(用于部署)时使用usemin&filerev: 在我的index.html的头中,以下代码告诉usemin将build标记之间的所有文件都收集起来,并将其聚集到一个名为ie-shims.js [...] <!-- build:js /js/ie-shims.js --> <script src="/vendor/html5shiv/dist/html5shiv.js"></script>
  • grunt-contrib-connect works only with keepalive
    Something strange happens, when I try to connect to server. There are no errors in terminal, it says "Started connect web server on http://0.0.0.0:5555", then done without errors. But when I serf to http://localhost:5555/ - I get typical "page not found". In chrome console one warning and one error: i18n-values: Missing value for "primaryParagraph" http://localhost:5555/:1 GET http://localhost:5555/ net::ERR_CONNECTION_REFUSED The more surprising is that when I define keepalive:true everything works fine. Really, I don't get why is it so. My Gruntfile.js 'use strict'; module.exports = function
  • 'El Capitan's 的无根破坏了旧的 grunt 配置吗?(Is 'El Capitan's' rootless breaking old grunt configs?)
    问题 迁移到 El Capitan 后,似乎用户遇到了 grunt 安装的问题,可能与 El Capitan 的无根更改有关。 特别是,运行 grunt --force 命令会导致 EPERM 错误。 工作流程如下: 假设已经安装了 npm,导航到包含 package.json 和 gruntfile.js 的 grunt 目录并调用 grunt: grunt --force 示例 Gruntfile.js 文件内容: module.exports = function(grunt) { // All configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { // Configuration for concatenating files goes here. dist: { src: [ '../js/libs/owl.carousel.js', '../js/libs/jquery.actual.js', '../js/libs/chosen.jquery.js', '../js/libs/jquery.parallax.js', '../js/src/common.js' ], dest: '../js/pro/global.js', }, }
  • 如何让 grunt 服务任务与手表一起工作?(How to get grunt serve task working alongside watch?)
    问题 我最近安装并启动并运行了它,但我似乎无法让它与我的监视任务同时运行? 在我的 grunt 文件中,如果在观看之前注册服务任务,服务器会启动,但观看任务不会......反之亦然。 这是服务包,我正在使用和附加的 Grunt 文件: https://www.npmjs.com/package/grunt-serve module.exports = function(grunt) { // 1. All configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { dist: { src: [ 'js/libs/*.js', // All JS in the libs folder 'js/global.js' // This specific file ], dest: 'js/build/production.js', } }, uglify: { options: { mangle: false }, my_target: { files: { 'js/build/production.min.js': ['js/build/production.js'] } } }, imagemin: { dynamic: { files: [{ expand
  • grunt-contrib-connect 仅适用于 keepalive(grunt-contrib-connect works only with keepalive)
    问题 当我尝试连接到服务器时,发生了一些奇怪的事情。 终端中没有错误,它说“在http://0.0.0.0:5555"上开始连接 Web 服务器http://0.0.0.0:5555" ,然后没有错误地完成。 但是当我在http://localhost:5555/农奴时 - 我得到典型的“找不到页面”。 在 chrome 控制台中,一个警告和一个错误: i18n-values: Missing value for "primaryParagraph" http://localhost:5555/:1 GET http://localhost:5555/ net::ERR_CONNECTION_REFUSED 更令人惊讶的是,当我定义 keepalive:true 时,一切正常。 真的,我不明白为什么会这样。 我的 Gruntfile.js 'use strict'; module.exports = function( grunt ) { // tasks grunt.initConfig({ // compile SASS sass: { dist: { files: [{ expand: true, flatten: true, src: ['assets/source/sass/*.scss','app/shared/**/*.scss','app/components/**
  • 为什么建议使用concat然后在后者可以同时做到的情况下进行uglify?(Why is it recommended to use concat then uglify when the latter can do both?)
    问题 我不断看到有关将JS文件准备好用于生产并随后变得丑陋的建议。 例如,此处是Yeoman艰苦的任务中的一个。 默认情况下,流程为:concat-> uglifyjs。 考虑到UglifyJS可以同时进行连接和最小化,为什么您同时需要两者呢? 谢谢。 回答1 运行基本测试,看看执行concat和uglify与uglify之间是否存在性能差异。 package.json { "name": "grunt-concat-vs-uglify", "version": "0.0.1", "description": "A basic test to see if we can ditch concat and use only uglify for JS files.", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-concat": "^0.5.0", "grunt-contrib-uglify": "^0.6.0", "load-grunt-tasks": "^1.0.0", "time-grunt": "^1.0.0" } } Gruntfile.js module.exports = function (grunt) { // Display the elapsed execution time of grunt
  • How to get grunt serve task working alongside watch?
    I've recently installed and got a it up and running but I can't seem to get it running concurrently with my watch task? In my grunt file, if register the serve task before watch, the server spins up and but the watch task doesn't....and vice versa. This is the serve package and Im using and Grunt file attached: https://www.npmjs.com/package/grunt-serve module.exports = function(grunt) { // 1. All configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { dist: { src: [ 'js/libs/*.js', // All JS in the libs folder 'js/global.js' // This specific file ], dest
  • grunt 新手 - 警告:找不到任务“concat,uglify”(new to grunt - warning: task "concat, uglify" not found)
    问题 正如标题所说,我是 Grunt 的新手。 我正在关注位于:http://24ways.org/2013/grunt-is-not-weird-and-hard/ 的教程。 这是一个较旧的教程,但大多数似乎都一样。 我已经安装了“grunt-contrib-concat”和“grunt-contrib-uglify”并且可以单独运行。 但是当我运行grunt ,我收到以下错误: Warning: Task "concat, uglify" not found. Use --force to continue. Aborted due to errors. Warning: Task "concat, uglify" not found. Use --force to continue. Aborted due to errors. 我环顾四周,似乎无法弄清楚。 我的文件如下: Gruntfile.js: module.exports = function(grunt) { // 1. All configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { dist: { src: [ 'js/libs/*.js', // All JS in the
  • Grunt concat + uglify带有源地图(Grunt concat + uglify with sourcemaps)
    问题 我使用concat将JS文件合并为一个文件,然后进行uglify最小化JavaScript。 如何创建使用源JS文件的sourcemaps文件? 我当前的gruntfile: concat: { options: { // define a string to put between each file in the concatenated output separator: ';' }, dist: { // the files to concatenate src: ['<%= config.src %>/js/**/*.js'], // the location of the resulting JS file dest: '<%= config.dist %>/js/main.js' } }, uglify: { dist: { files: { '<%= config.dist %>/js/main.min.js': ['<%= concat.dist.dest %>'] } } }, 回答1 您需要同时在concat和uglify任务上启用源映射,并且必须为sourceMapIn任务指定sourceMapIn选项。 这是样本grunt配置: concat : { options : { sourceMap :true }, dist : { src : [
  • new to grunt - warning: task "concat, uglify" not found
    As the title says I'm new to Grunt. I am following a tutorial located at: http://24ways.org/2013/grunt-is-not-weird-and-hard/. It is an older tutorial but most seems to work the same. I have installed "grunt-contrib-concat" and "grunt-contrib-uglify" and can run both individually. But when I run grunt, I get the following error: Warning: Task "concat, uglify" not found. Use --force to continue. Aborted due to errors. I've been looking around and can't seem to figure it out. My files are as follows: Gruntfile.js: module.exports = function(grunt) { // 1. All configuration goes here grunt
  • 使用Grunt.JS压缩一些文件,并合并所有文件(Minify some files, combine all, with Grunt.JS)
    问题 我正在将一个开发团队从Visual Studio的附加程序Chirpy转移到CSS / JS文件的组合和最小化,作为工作流自动化过程的一部分。 在chirpy中,配置看起来像这样(为简洁起见被截断): <FileGroup Name="scripts.combined.js" Minify="both"> <File Path="forms.js" Minify="false" /> <File Path="cookie_monster.js" Minify="true" /> ... </FileGroup> 因此,在这种情况下,我有2个文件。 一个需要缩小,而另一个则不需要。 (根据这里的人,缩小forms.js会破坏功能,并且我还没有分配时间来修复它)。 在grunt ,我需要在此列表中的某些文件上运行缩小任务,而在其他文件上则不需要。 然后,我需要在所有文件上运行concat任务(缩小文件或其他文件)。 鉴于uglifyJS需要一个dest集来输出缩小的文件,我是否只需将其设置为temp.min.js类的temp.min.js ,并在我的concat任务中,使用该文件来构建我的scripts.combined.js文件[包含两个缩小的文件和未压缩的文件],然后使用grunt clean删除temp.min.js文件? 有一个更好的方法吗? [编辑添加
  • Grunt 连接所有 package.json 依赖项(Grunt concat all package.json dependencies)
    问题 这是我第一次使用 grunt 和 npm。 我的 package.json 包含这个: "dependencies": { "angular": "latest", "bootstrap": "latest", "jquery": "latest" } 有没有办法告诉 grunt:“查看我的所有依赖项,加载正确的文件,然后创建一个 JS 文件和一个 CSS 文件进行分发”? *这是因为我不想列出每个依赖项的所有分发文件。 回答1 是的,您可以使用 grunt 模块,例如:concat、cssmin 和 sass,将您的文件合并为 1。 我将尝试给出一个小的解释,但您可以使用链接阅读更多内容并理解。 连接:https://www.npmjs.com/package/grunt-contrib-concat cssmin: https://github.com/gruntjs/grunt-contrib-cssmin sass: https://github.com/gruntjs/grunt-contrib-sass 在包 json 上:插入此依赖项: "grunt-contrib-concat": "*", "grunt-contrib-cssmin": "*", "grunt-contrib-uglify": "*", "grunt-contrib-uglify": "*"
  • 如何通过 grunt-contrib-uglify 按顺序缩小 js 文件?(how to minify js files in order via grunt-contrib-uglify?)
    问题 我有一个像下面这样的目录: /文件夹/b.js /文件夹/jQuery.js /文件夹/a.js /文件夹/子/ c.js 我想按顺序将所有这些 js 文件缩小到一个 js 文件中: jQuery.js -> a.js -> b.js -> c.js 问: 1.如何通过grunt-contrib-uglify来实现?(其实文件很多,单独指定所有源文件路径是不切实际的) 2.btw,如何在调试时获得未缩小的文件并在发布时获得缩小的单个文件并且无需更改html中的脚本标签(以及如何编写脚本标签)? 回答1 好问题! 1) Uglify 将重新排序目标文件中的函数,以便函数定义在顶部,函数执行在底部,但它似乎会保留函数执行的顺序。 这意味着如果您确保在 Gruntfile 的 Uglify 配置中首先提到 jQuery,则 jQuery 运行以定义其全局函数的函数将被放在首位。 我使用这个配置: uglify: { options: { sourceMap: true }, build: { files: { 'public/all.min.js': ['public/js/vendor/jquery-1.10.2.min.js', 'public/js/*.js'], } } } 2)我认为没有一种明确的方法可以做到这一点。 这取决于你有什么 Web 框架、模板框架和什么样的要求
  • 在grunt.js中动态映射目的地(Dynamic mapping for destinations in grunt.js)
    问题 我有一个包含多个子文件夹的项目,这些子文件夹包含要连接的JavaScript文件。 什么是配置它们的正确方法? 例如。 源:/modules/$modulename/js/*.js(几个文件)目的:/modules/$modulename/js/compiled.js 因此,我想做的是将未知/未配置数量的子文件夹($ modulename)的js文件编译为每个子文件夹一个文件。 这可能吗? 以下功能(根据hereandnow78的指令构建)可以完成此工作: grunt.registerTask('preparemodulejs', 'iterates over all module directories and compiles modules js files', function() { // read all subdirectories from your modules folder grunt.file.expand('./modules/*').forEach(function(dir){ // get the current concat config var concat = grunt.config.get('concat') || {}; // set the config for this modulename-directory concat
  • Angular.module缩小错误(Angular.module minification bug)
    问题 有最紧迫的时间试图弄清楚为什么缩小不起作用。 我已经通过数组对象在网络上根据大量建议在函数之前注入了我的提供者,但仍然是“未知提供者:aProvider <-a” 常规的: var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs']) .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){ $routeProvider. when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl}); $locationProvider.html5Mode(true); }]) 缩小: var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs']) .config(['$routeProvider', '$locationProvider', function(a, b){ a. when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl}); b.html5Mode
  • 在 grunt watch 时启动 karma 服务器(Getting karma server to launch upon grunt watch)
    问题 在开发过程中,我使用 karma 和 grunt 来监视文件更改并运行测试。 在命令行中,我希望能够简单地输入 $ grunt watch 并让 karma 服务器启动一次,然后在文件更改时咕噜咕噜地观察更改并运行各种任务(包括 karma 测试)。 我不想输入$ karma start 。 如何做到这一点? 回答1 选项1 可以使用grunt-contrib-watch的atBegin选项。 思路是引入一个启动任务,它会在watcher启动时运行: watch: { startup: { files: [], // This is redundant, but we get an error if not specifying files. tasks: [ 'karma:continuous:start' ], options: { atBegin: true, spawn: false } }, ... } 完整的Gruntfile.js : module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), karma: { options: { files: [ 'client/**/*.spec.js' ], frameworks: [
  • 如何创建和组织配置并注册Grunt任务(How to create and organise config and register grunt tasks)
    问题 我有一个项目,正在使用grunt处理我的Js和SASS文件。 此刻,当我需要处理某些事情时,即使我只想更改一个模块或仅更改SASS文件,也需要调用gruntfile.js所有任务。 有没有一种方法可以创建自定义任务,仅运行sass部分,另一种方法仅创建模块进程,我可以在提示符下调用此任务? 这是我尝试过的,但没有成功: module.exports = function(gruntHome) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), /* @CONCAT */ concat: { home : { src: 'src/app/component/home/*.js', dest: 'src/app/component/home/concat/concat_config.js' } }, /* @ANNOTATE */ ngAnnotate: { options: { add: true }, home: { files: { 'src/app/component/home/concat/concat_config.js': 'src/app/component/home/concat/concat_config.js' } } }, /* @UGLIFY */ uglify: { home:
  • Grunt Uglify 源映射“无法写”(Grunt Uglify source map “unable to write”)
    问题 我正在使用 Grunt 来连接和缩小文件(使用 grunt-contrib-uglify 和 grunt-contrib-concat ),我想添加一个源映射。 uglify 文档说只需为 sourceMap 添加一个设置为 true 布尔值的选项。 但是当我将它添加到我的任务中时(我尝试了几个不同的任务),该过程运行良好,直到它到达源映射部分,然后我得到: 写真...错误警告:无法写入“真实”文件(错误代码:未定义)。 使用 --force 继续。 连接完成,缩小完成。 但是......源地图没有运气。 来自我的 Grunt 文件的示例: uglify: { options: { banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', }, publicjs: { options: { sourceMap: true }, files: { 'js/<%= pkg.name %>_public.min.js': ['<%= concat.publicjs.dest %>'] } } } (我也尝试过在我的顶级选项对象中使用 sourceMap。) 有任何想法吗? 显然 Grunt 可以写入该目录,因为它创建了连接和缩小的文件
  • Grunt Uglify source map “unable to write”
    I'm using Grunt to concat and minify files (with grunt-contrib-uglify and grunt-contrib-concat ) and I wanted to add a source map. The uglify docs say to just add an option for sourceMap set to a boolean of true. But when I add that to my tasks (I've tried a couple different ones) the process runs fine until it gets to the source map part, then I get: Writing true...ERROR Warning: Unable to write "true" file (Error code: undefined). Use --force to continue. The concatenation is done, the minification is done. But... no luck with the sourcemap. Sample from my Grunt file: uglify: { options: {