it-swarm.com.ru

Как объединить и минимизировать несколько файлов CSS и JavaScript с помощью Grunt.js (0.3.x)

Примечание. Этот вопрос относится только к Grunt 0.3.x и оставлен для справки. Для получения справки о последней версии Grunt 1.x, пожалуйста, смотрите мой комментарий под этим вопросом.

В настоящее время я пытаюсь использовать Grunt.js для настройки процесса автоматической сборки для первой конкатенации, а затем минимизации файлов CSS и JavaScript.

Мне удалось успешно объединить и минимизировать мои файлы JavaScript, хотя каждый раз, когда я запускаю grunt, кажется, что он просто добавляется к файлу, а не перезаписывает их.

Что касается минимизации или даже конкатенации CSS, я пока не могу этого сделать!

С точки зрения хрупких CSS-модулей, я пытался использовать consolidate-css, grunt-css & cssmin, но безрезультатно. Не могу понять, как их использовать!

Моя структура каталогов выглядит следующим образом (являясь типичным приложением node.js):

  • app.js
  • grunt.js
  • /public/index.html
  • / public/css/[различные файлы css]
  • / public/js/[различные файлы javascript]

Вот как выглядит мой файл grunt.js в корневой папке моего приложения:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

Так что просто для подведения итогов мне нужна помощь с двумя вопросами:

  1. Как объединить и свернуть все мои CSS-файлы в папке /public/css/ в один файл, скажем main.min.css
  2. Почему grunt.js продолжает добавлять к объединенным и уменьшенным файлам javascript concat.js и concat.min.js в /public/js/ вместо того, чтобы перезаписывать их каждый раз при запуске команды grunt?

Обновлено 5 июля 2016 г. - Обновление с Grunt 0.3.x до Grunt 0.4.x или 1.x

Grunt.js переместился в новую структуру в Grunt 0.4.x (файл теперь называется Gruntfile.js). Пожалуйста, обратитесь к моему проекту с открытым исходным кодом Grunt.js Skeleton , чтобы получить помощь по настройке процесса сборки для Grunt 1.x.

Переход от Grunt 0.4.x к Grunt 1.xне должно вносить много серьезных изменений .

96
Jasdeep Khalsa

concat.js включается в исходные файлы задачи concatpublic/js/*.js. У вас может быть задача, которая удаляет concat.js (если файл существует) перед повторной конкатенацией, передавая массив, чтобы явно определить, какие файлы вы хотите объединить и их порядок, или изменить структуру вашего проекта.

Если вы сделаете последнее, вы можете поместить все свои источники в ./src, а ваши встроенные файлы в ./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Затем настройте задачу concat

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

Ваша мин задача

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

Задача build-in min использует UglifyJS, поэтому вам нужна замена. Я нашел grunt-css довольно хорошим. После установки загрузите его в файл grunt

grunt.loadNpmTasks('grunt-css');

А затем настроить его

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

Обратите внимание, что использование аналогично встроенному мин.

Измените свою задачу default на

grunt.registerTask('default', 'concat min cssmin');

Теперь, запустив grunt, вы получите желаемый результат.

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js
106
jaime

Я хочу упомянуть здесь ОЧЕНЬ, ОЧЕНЬ интересную технику, которая используется в больших проектах, таких как jQuery и Modernizr, для объединения вещей.

Оба этих проекта полностью разработаны с использованием модулей requirejs (вы можете видеть это в их репозиториях на github), а затем они используют оптимизатор requirejs в качестве очень умного конкатенатора. Интересно то, что, как вы можете видеть, ни jQuery, ни Modernizr не нужны для работы с requirejs, и это происходит потому, что они стирают синтетический ритуал requirejs, чтобы избавиться от requirejs в их коде. Таким образом, они получают автономную библиотеку, которая была разработана с использованием модулей requirejs! Благодаря этому они могут выполнять сборки своих библиотек, помимо прочих преимуществ.

Для всех тех, кто заинтересован в объединении с оптимизатором requirejs, посмотрите этот пост

Также есть небольшой инструмент, который абстрагирует весь шаблон процесса: AlbanilJS

12
Augusto Altman Quaranta

Я согласен с ответом выше. Но вот еще один способ сжатия CSS.

Вы можете объединить свой CSS с помощью YUI компрессор:

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'Java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
}; 
10
Anshul

Вам не нужно добавлять пакет concat, вы можете сделать это через cssmin следующим образом:

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

А для js используйте uglify вот так:

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }
3
Inc33

Я думаю, что может быть более автоматическим, грубая задача usemin позаботится о том, чтобы сделать всю эту работу за вас, нужно только некоторую настройку:

https://stackoverflow.com/a/33481683/1897196

0
Donald