среда, 21 февраля 2018 г.

JS Grunt Минификация js css

Очень понятный гайд хорошая статья в которой используется несколько плагинов, sample с официального сайта
Устанавливаем из репо node js
далее
npm install -g grunt-cli
В папке с проектом запускаем
npm install
grunt
Warning: Task "default" not found. Use --force to continue.


После установки в папке проекта у нас появляется 
package.json
В нем можно видеть какие плагины установлены

Устанавливаем Grunt
npm install grunt --save-dev
+ grunt@1.0.2
added 1 package, removed 1 package and updated 3 packages in 17.879s

Нужно доустановить плагин минификации:
npm install grunt-contrib-uglify --save-dev
+ grunt-contrib-uglify@3.3.0
added 11 packages in 10.918s

Меняем в файле Gruntfile.js каталоги, которые нужно минифицировать
for ex.
concat: { dist: { src: [ 'js/libs/*.js', // Все JS в папке libs 'js/global.js' // Конкретный файл ], dest: 'js/build/production.js', } }

Запускаем минификацию js
grunt uglify
Running "uglify:build" (uglify) task
>> 1 file created 56.26 kB → 35.11 kB
Done.

Gruntfile.js
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'scripts/**/.js',
        dest: 'scripts.build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

или такой вариант

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['scripts/**/*.js'],
        dest: 'scripts.min/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'scripts.min/allscripts.min.js': ['<%= concat.dist.dest %>']
        }
      }
    }    
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', ['concat', 'uglify']);

};

Вариант с js css 

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
       js: {
          src: 'scripts/*.js',
          dest: 'scripts.min/concat.js'
       },
       css: {
          src: 'css/*.css',
          dest: 'css.min/concat.css'
       }
    },
    uglify: {
      dist: {
        files: {
          'scripts.min/scripts.min.js': ['scripts.min/concat.js']
        }
      }
    },
    cssmin: {
       target: {
          files: [{
             expand: true,
             cwd: 'css.min',
             src: ['*.css', '!*.min.css'],
             dest: 'css.min',
             ext: '.min.css'
          }]
       }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['concat', 'uglify',  'cssmin']);
};

Комментариев нет:

Отправить комментарий