标签: grunt-contrib-concat

我一直看到让JS文件准备好生产的建议是concat然后uglify.

例如这里,在约曼的咕噜任务上.

默认情况下,流程为:concat - > uglifyjs.

考虑到UglifyJS可以同时进行连接和缩小,为什么你需要同时使用两者？

谢谢.

我使用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 %>']
        }
    }
},

我有一个可能有很多模块的Angular项目.每个模块都有自己的目录,包含控制器,指令,服务等的子目录.如下所示:

src
|-- js
    |-- modules
        |-- moduleOne
            | module.js
            |-- controllers
                | listController.js
                | detailController.js
            |-- directives
                | listItem.js
                | summaryWidget.js
            |-- filters
            |-- services
                | moduleService.js

我的构建基本上捆绑并编译来自src /的文件并放入dev /,然后缩小dev /中的文件并移动到prod /.在开发期间,服务器指向dev /文件夹,在生产中,服务器指向prod /文件夹(也就是为什么文件以.min.js结尾,即使它们只是编译/连接).这个过程运作良好.

目前,我的concat任务是抓取moduleOne /中的所有文件,并在我的dev目录中创建一个moduleOne.js文件.这就是我想要的,但更动态:

concat: {
    modules: {
        files: {
            "dev/js/modules/moduleOne.min.js": [
                "src/js/modules/moduleOne/*.js",
                "src/js/modules/moduleOne/**/*.js"
            ],
            "dev/js/modules/moduleTwo.min.js": [
                "src/js/modules/moduleTwo/*.js",
                "src/js/modules/moduleTwo/**/*.js"
            ]
        } 
    }
}

问题是我必须为每个模块执行此操作,但不要认为我需要这样做.

我尝试了以下操作,因为这是我想做的事情:

concat: {
    modules: {
        files: [{
            expand: true,
            cwd: "src/js/modules",
            src: "**/*.js",
            dest: "dev/js/modules",
            ext: ".min.js"
        }]
    }
}

但结果是我的所有文件和目录结构都从src /移到了dev /.我基本上用concat做副本,没用. …

在我提出这个问题之前,我想指出在StackOverflow上发布了几个 类似的 问题 ,但它们都没有为问题提供准确的解决方案.

我有一个工作流程设置,Grunt将多个css文件组合并缩小为一个文件,用于生产环境.

我面临的问题是,在运行Grunt之后,字体和图像路径会中断,因为它们仍指向现有的相对文件路径.

举个例子:

在static/homepage/startup/common-files/css/icon-font.css我有以下的CSS规则:

@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);

在我的Gruntfile中,我指定我希望缩小的css文件的输出style.min.css位于static/css/custom/homepage/.这样做的问题是文件路径发生变化,导致无法再找到所有字体和图像依赖关系,并在浏览器中返回404状态.

我做了什么来尝试解决这个问题

我认为有两种方法可以解决这个问题:

1. 复制所有相关文件,使它们相对于style.min.css所在的新目录.这样做的缺点是它可能很快变得混乱并破坏我的项目文件夹结构!
2. 手动更改路径.但话说回来,这有什么意义呢？Grunt专为自动化任务而设计!

有人知道如何解决这个问题吗？我浪费了将近10个小时,我开始放弃了.人们声称已经在Github问题页面修复了这个问题,但是没有人真正说明他们是如何修复它的.

编辑:

我查看了clean-css库源代码,看起来你可以将relativeTo属性传递给minifier对象.我已经弄得一团糟,但我仍然被卡住了.如果我对此有所了解,我会报告回来.

编辑:

好吧,我终于找到了一些解释什么relativeTo(和其他)属性的文档.我仍然坚持我的文件结构应该是什么配置....

relativeTo - path to resolve relative @import rules and URLs
root - path to resolve absolute @import rules and rebase relative URLs
roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
target - path to a folder or …

为什么我会收到以下错误？我的咕噜声版本是> v0.4.0

npm install grunt-contrib-concat --save-dev

+ - UNMET PEER DEPENDENCY grunt @> = 0.4.0

错误消息:

..Projects\Hartz\Hartz> npm install grunt-contrib-concat --save-dev Hartz@1.0.0 C:..\Projects\Hartz\Hartz + - UNMET PEER DEPENDENCY grunt @> = 0.4.0` - - grunt-contrib-concat@1.0.1

npm WARN grunt-contrib-jshint@1.0.0需要一个grunt @> = 0.4.0的对等体,但没有安装.npm WARN grunt-contrib-concat@1.0.1需要一个grunt @> = 0.4.0的对等体,但没有安装.npm WARN Hartz@1.0.0没有存储库字段.

grunt -V

grunt-cli v1.2.0
grunt v1.0.1

我正在尝试使用grunt和babel来转换文件夹中的所有js6文件,最后得到一个连接的单个文件(js5),其中包含原始es6文件的工作源映射.但是,源映射不起作用.我的babel,concat设置如下:

 "babel": {
        options: {
            sourceMap : true
        },
        dist: {
            files:[
                {
                    expand: true,
                    cwd: 'wwwroot/js/src',
                    src: ['*.js'],
                    dest: 'tmp/js'
                }]
        }
    },

    concat: {
        options: {
            sourceMap: true
        },
        js: {
            src: [
              'tmp/js/*.js',
            ],
            dest: 'wwwroot/js/app.js'
        }
    }

Versions:
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"grunt-babel": "5.0.1",
"grunt-contrib-concat" : "0.5.1"

我最终得到了一个包含大量js文件和src映射(tmp目录)的文件夹.但是将它们合并到一个文件中会完全混淆源映射.

想法？此外,我可以以某种方式跳过临时文件的制作和排序只是将结果输入concat？

我需要能够在Grunt中运行相同类型任务的多个任务(grunt-contrib-concat).我已经尝试了下面的几件事,但都没有工作.关于如何做到这一点的任何想法都表示赞赏.

concat: {
    dist: {
        src: [
            'js/foo1/bar1.js',
            'js/foo1/bar2.js'
        ],
        dest: 'js/foo1.js',
        src: [
            'js/foo2/bar1.js',
            'js/foo2/bar2.js'
        ],
        dest: 'js/foo2.js'
    }
}

和..

concat: {
    dist: {
        src: [
            'js/foo1/bar1.js',
            'js/foo1/bar2.js'
        ],
        dest: 'js/foo1.js'
    }
},
concat: {
    dist: {
        src: [
            'js/foo2/bar1.js',
            'js/foo2/bar2.js'
        ],
        dest: 'js/foo2.js'
    }
}

和..

concat: {
    dist: {
        src: [
            'js/foo1/bar1.js',
            'js/foo1/bar2.js'
        ],
        dest: 'js/foo1.js'
    },
    dist: {
        src: [
            'js/foo2/bar1.js',
            'js/foo2/bar2.js'
        ],
        dest: 'js/foo2.js'
    }
}

我正在使用grunt-contrib concat和uglify模块来处理一些javascript.目前,如果src/js/为空,它们仍将创建一个(空)concat'd文件,以及缩小版本和源映射.

我想src/js/在继续之前检查文件夹是否为空,并且如果是,则任务应该跳过(不会失败).任何想法如何做到这一点？

我正在写一个应该的Gruntjs脚本

• concatenate +将一些JS文件的模板替换为目标目录(contrib-concat)
• 复制+替换其他一些文件的模板(contrib-copy)
• 将文件打包成zip文件

contrib-concat有一个布尔选项进程来<% pkg.version %>处理文件时替换模板(如).

contrib-copy还有一个选项processContent,但我不知道如何使用此选项触发模板处理.

module.exports = function(grunt) {

    grunt.initConfig({
        meta: {
            banner: ' \
/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n \
 * <%= pkg.homepage %>\n \
 */\n\n',
            build_date: '<%= grunt.template.today("yyyy-mm-dd") %>',
            build_num: process.env.BUILD_NUMBER || 0, // Jenkins build number if available
            version_string: '<%= pkg.version %>-<%= meta.build_num %>',
            dist_dir: 'dist/<%= pkg.version %>'
        },
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            options: {
                stripBanners: {
                    block: …

我喜欢使用 Grunt 来连接和缩小插件等.. 有人可以告诉我如何在 Angular 2 的 node_modules 上完成这项任务.. 我想最终得到 1 个缩小和连接的文件.. 我试过 webpack 等和 gulp教程，但没有一个能完成工作。