如何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.js和all.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
以防万一,如果上面的链接不工作:
- 您可以缩小所有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'] } } } }); };