как настроить grunt.js для отдельной минимизации файлов

есть несколько файлов js в static/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'
   }
 }

person looping    schedule 13.11.2012    source источник
comment
В настоящее время для этого нет готовой поддержки (см. Как минимизировать отдельные файлы и выполнить не объединить их в один файл?). Вам нужно будет динамически сгенерировать конфигурацию для минимальной задачи (с большим количеством целей) или создать свою собственную задачу, которая использует min helper... Я попытаюсь опубликовать решение позже...   -  person Dmitry Pashkevich    schedule 16.11.2012
comment
@DmitryPashkevich Я не уверен, что согласен. Вы можете запустить несколько задач в рамках минимальной задачи. Смотрите мой ответ ниже.   -  person DavidHyogo    schedule 02.02.2013
comment
@DavidHyogo, вопрос заключался в том, как не вручную зачислять все файлы, но иметь конфигурацию, подобную Inge one, в исходной работе над вопросом   -  person Dmitry Pashkevich    schedule 02.02.2013
comment
*Inge = the (предиктивный текст, извините :))   -  person Dmitry Pashkevich    schedule 02.02.2013
comment
@DmitryPashkevich Спасибо Дмитрий. Вы лучше меня поняли вопрос. Строго говоря, вопрос на самом деле не говорил об этом, хотя вы его поняли, поэтому я отредактировал его, чтобы сделать вопрос более ясным. Я оставлю свой ответ, потому что он полезен для простых случаев использования, но я вижу, насколько полезно было бы иметь возможность сделать весь каталог так, как задумал спрашивающий.   -  person DavidHyogo    schedule 02.02.2013
comment
@looping Большинство моих правок были удалены во втором редактировании. Вопрос снова неясен и полон странного неестественного английского.   -  person DavidHyogo    schedule 25.02.2013


Ответы (11)


У меня была та же проблема, и я нашел решение, которое автоматически минимизировало бы все мои скрипты по отдельности:

uglify: {
      build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'build/scripts',
            cwd: 'app/scripts'
        }]
      }
    }
person Frank Parent    schedule 22.03.2013
comment
Можете ли вы точно объяснить, какое свойство означает, что потому что это не сработало для меня. - person LoneWOLFs; 21.08.2013
comment
@LoneWOLFs ссылаются на gruntjs.com/ для получения информации об этих . Также обратите внимание, что упаковка [] необходима даже для объявления одного файла. - person Oli Studholme; 04.11.2013
comment
cwd означает текущий рабочий каталог, я думаю, что любой, кто использует этот фрагмент, должен знать о его структуре каталогов, я лично удалил cwd, и это сработало. - person Milad; 09.07.2015
comment
Есть ли возможность изменить имена файлов? Текущее решение сохранит их, афаик. Как насчет динамического изменения *.js на *.min.js? - person skip405; 01.08.2015
comment
Просто добавьте ext: '.min.js', в список внутри files для вывода .min.js копий файлов. - person Daniel Tonon; 20.01.2016

В grunt 0.4 вы можете указать несколько пар dest/src следующим образом:

uglify: {
    dist: {
        files: {
            'dist/main.js': 'src/main.js',
            'dist/widget.js': 'src/widget.js'
        }
    }
}
person Sindre Sorhus    schedule 03.12.2012
comment
Некоторым следует найти файл expandMapping (gruntjs.com/api/grunt.file#grunt. file.expandmapping) полезно, так что весь каталог может быть минимизирован, а его структура сохранена нетронутой, без перечисления каждого JS-файла внутри. - person Greg; 02.03.2013
comment
Вы также можете скомпилировать пары нескольких файлов в один мини-файл, например: files: { 'dist/main.js': 'src/main/*.js', 'dist/widget.js': 'src/widget/* .js' } - person Baraa; 07.06.2015

Или вы можете использовать expandMapping, например:

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

И вывод:

путь/test.js => пункт назначения/путь/test.min.js
путь2/foo.js => пункт назначения/путь2/foo.min.js

person Rafa Heringer    schedule 02.09.2013
comment
Это замечательно, однако, если .min.js файлы уже существуют в этих каталогах, он будет создавать .min.min.js файлов и так далее при каждом запуске. Как этого избежать? - person Solomon Closson; 27.07.2020

Это ниже gruntjs работает для меня для создания мини-файлов для всех файлов 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']);

};
person Sharmila    schedule 07.03.2014

Из документов grunt для min:

Эта задача является многозадачной, что означает, что 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 для этих задач нет ничего особенного.

person DavidHyogo    schedule 02.02.2013
comment
ОП хочет использовать подстановочные знаки для включения всех файлов. Для этого требуется, чтобы вы назвали каждый отдельный файл. - person Noremac; 27.03.2015

Используйте параметр ext, чтобы назвать файлы .min.js вместо .js.

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

Для явного экспорта некоторых файлов в отдельные выходные файлы (в данном случае 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'
  }
},
person lubosdz    schedule 17.12.2014

Мне нравится сохранять исходные файлы, а также создавать измененные:

uglify: {
  dist: {
    files: [{
      expand: true,
      src: '**/*.js',
      dest: 'destdir',
      cwd: 'srcdir',
      rename: function(dest, src) { return dest + '/' + src.replace('.js', '.min.js'); }
    }]
  }
},
person redgeoff    schedule 01.09.2014
comment
Это ответ, который я искал. У меня есть некоторые файлы, которые заканчиваются чем-то вроде «.pkgd.js», поэтому, если я выберу опцию ext, все остальные предложат, что это будет перезаписано и сломает мое приложение. На мой взгляд, это самый надежный ответ, поскольку он делает именно то, что мы хотим. - person ESR; 10.05.2016

Вы также можете использовать копирование и grunt-mindirect.

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

Это должно работать.

person Charles    schedule 04.12.2012

Я думаю, это имеет значение только для часовых задач.

В 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 и все будет нормально автоматически.

person bullgare    schedule 27.02.2013

В намерении помочь другим, кто зайдет на эту страницу в будущем -

Я наткнулся на видео, в котором объясняется, как минимизировать файлы JS с помощью Grunt 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 и объединить/объединить их в один файл, используя следующий скрипт:

    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']
				}
			}
		}
	});	
};

  1. Если вы хотите, чтобы исходные карты также генерировались, вы можете включить опцию «sourceMap» следующим образом:

    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']
				}
			}
		}
	});	
};

  1. Чтобы сохранить всю структуру папок при минимизации файлов 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'
           		}]
			}
		}
	});	
};

person user203687    schedule 26.08.2016