static/js /にいくつかのjsファイルがあります
1. a.js
2. b.js
3. c.js
grunt.jsを設定して以下のファイルを取得する方法:
1. a.min.js
2. b.min.js
3. c.min.js
これまでのところ、特定のファイル名を入力する必要があります。
min: {
dist: {
src: 'js/**/*.js',
dest: 'js/min/xxx.min.js'
}
}
同じ問題があり、すべてのスクリプトを個別に自動的に縮小するソリューションを見つけました。
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は、dirの下にあるすべてのjsファイルの縮小ファイルを作成するのに役立ちます
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']);
};
面倒なドキュメントから:
このタスクはマルチタスクです。つまり、ターゲットが指定されていない場合、Gruntはすべての最小ターゲットを自動的に繰り返します。
だからあなたはこれを行うことができます:
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」という名前について特別なことはありません。
いくつかのファイルを個別の出力ファイルに明示的にエクスポートするには(この場合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'
}
},
ext
オプションを使用して、ファイルに名前を付けます.min.js
の代わりに .js
uglify: {
build: {
files: [{
expand: true,
src: '**/*.js',
dest: 'build/scripts',
cwd: 'app/scripts',
ext: '.min.js'
}]
}
}
私は元のファイルを保持し、またlikeいものを作成するのが好きです:
uglify: {
dist: {
files: [{
expand: true,
src: '**/*.js',
dest: 'destdir',
cwd: 'srcdir',
rename: function(dest, src) { return dest + '/' + src.replace('.js', '.min.js'); }
}]
}
},
将来このページにアクセスする他の人を助けるために-
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
念のため、上記のリンクが機能しない場合:
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']
}
}
}
});
};
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
options : {
sourceMap : true,
},
files:{
'dest/all.min.js': ['src/app.js', 'src/one.js', 'src/t/two.js']
}
}
}
});
};
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify:{
t1:{
files: [{
cwd: 'src/',
src: '**/*.js',
dest: 'dest/',
expand: true,
flatten: false,
ext: '.min.js'
}]
}
}
});
};
監視タスクの場合にのみ問題になると思います。
Grunt 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
を開始するだけで、すべてが自動的にうまくいきます。
Copyと grunt-mindirect を使用することもできます。
copy: {
dist: {
src: 'a.js',
dest: 'a.min.js'
}
},
minidirect: {
all: 'js/min/*.min.js'
}
これは動作するはずです。