如何configurationgrunt.js来分别缩小文件

有一些js文件在静态/ js /

1. a.js 2. b.js 3. c.js 

如何configurationgrunt.js以获取以下文件:

  1. a.min.js 2. b.min.js 3. c.min.js 

到目前为止,我必须键入特定的文件名称:

  min: { dist: { src: 'js/**/*.js', dest: 'js/min/xxx.min.js' } } 

有同样的问题,并find了一个解决scheme,可以自动缩小所有我的脚本分开:

 uglify: { build: { files: [{ expand: true, src: '**/*.js', dest: 'build/scripts', cwd: 'app/scripts' }] } } 

在grunt 0.4中,你可以像这样指定多个dest / src对:

 uglify: { dist: { files: { 'dist/main.js': 'src/main.js', 'dist/widget.js': 'src/widget.js' } } } 

或者,您可以使用expandMapping,如下所示:

 min: { files: grunt.file.expandMapping(['path/*.js', 'path2/*.js'], 'destination/', { rename: function(destBase, destPath) { return destBase+destPath.replace('.js', '.min.js'); } }) } 

而输出:

path / test.js => destination / path / test.min.js
path2 / foo.js => destination / path2 / foo.min.js

下面这个gruntjs适用于为一个目录下的所有js文件创build缩小文件

 module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { build: { files: [{ expand: true, src: '**/*.js', dest: 'build/scripts', cwd: 'public_html/app', ext: '.min.js' }] } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); }; 

从咕噜文档分钟:

这个任务是一个多任务,这意味着如果没有指定目标,咕噜会自动遍历所有最小目标。

所以你可以这样做:

  min: { min_a: { src: 'a.js', dest: 'a.min.js' }, min_b: { src: 'b.js', dest: 'b.min.js' }, min_c: { src: 'c.js', dest: 'c.min.js' } 

这些任务的名称“dist”没有什么特别之处。

使用ext选项命名文件.min.js而不是.js

 uglify: { build: { files: [{ expand: true, src: '**/*.js', dest: 'build/scripts', cwd: 'app/scripts', ext: '.min.js' }] } } 

要将某些文件显式导出到单独的输出文件(在本例中为all.min.jsall.jquery.js ),请使用:

 uglify: { js: { files : { 'js/all.min.js' : [ 'js/modernizr.js', 'js/vendor/modernizr-2.6.2-respond-1.1.0.min.js', 'js/bootstrap.min.js', 'js/main.js', 'js/ZeroClipboard.min.js', 'js/bootstrap-datepicker/bootstrap-datepicker.js' ], 'js/all.jquery.js' : [ 'js/vendor/jquery-1.9.1.js', 'js/vendor/jquery-migrate-1.2.1.js', 'js/vendor/jquery-ui.js' ] } }, options: { banner: '\n/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n', preserveComments: 'some', report: 'min' } }, 

我喜欢保留原始文件,并创build丑化的文件:

 uglify: { dist: { files: [{ expand: true, src: '**/*.js', dest: 'destdir', cwd: 'srcdir', rename: function(dest, src) { return dest + '/' + src.replace('.js', '.min.js'); } }] } }, 

你也可以使用copy和grunt-mindirect 。

 copy: { dist: { src: 'a.js', dest: 'a.min.js' } }, minidirect: { all: 'js/min/*.min.js' } 

这应该工作。

我想这只是看重任务。

在咕噜0.4你可以做到这一点

  var filesA = 'a.js', filesB = 'b.js', filesC = 'c.js'; ... min: { min_a: { src: filesA, dest: 'a.min.js' }, min_b: { src: filesB, dest: 'b.min.js' }, min_c: { src: filesC, dest: 'c.min.js' } watch: { min_a: { files: filesA, tasks: ['min:min_a'] }, min_b: { files: filesB, tasks: ['min:min_b'] }, min_c: { files: filesC, tasks: ['min:min_c'] } } 

之后,刚开始grunt watch ,所有将自动罚款。

为了帮助未来来到这个页面的其他人 –

我遇到了一个video,介绍如何使用Grunt JS来缩小JS文件: https : //www.youtube.com/watch?v = Gkv7pA0PMJQ

源代码在这里提供: http : //www.techcbt.com/Post/359/Grunt-JS/how-to-minify-uglify-javascript-files-using-grunt-js

以防万一,如果上面的链接不工作:

  1. 您可以缩小所有JavaScript文件,并使用以下脚本将/ concat组合成一个文件:
  module.exports = function(grunt){ grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify:{ t1:{ files:{ 'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js'] } } } }); };