Разработка

Grunt для самых маленьких

На проекте есть папка с с js и стилями css.

Нужно все это минифицировать.

1 — нам нужен грант (установленный локально).

Предполагается, что глобально грант уже установлен.

Если нет, то

 $ sudo yum install nodejs-grunt*

Ставим нужное

 $ npm install grunt
$ npm-install grunt-contrib-unglify grunt-contrib-watch grunt-contrib-cssmin grunt-contrib-concat

Если не поставить модули локально, то получим ошибку

Unable to find local grunt

2 — создаем файл с описанием проекта package.json

{
  "name": "<project name>",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.5.0",
    "grunt-contrib-watch": "*"
  },
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-ts": "^1.11.13"
  }
}

3 — создаем сценарий для работы

module.exports = function (grunt) {
    // 1 - Описываем все выполняемые задачи
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            css: {
                src: ['src/**/*.css'],
                dest: 'dist/app.css'
            },
            js: {
                src: ['src/js/**/*.js'],
                dest: 'dist/app.js'
            }
        },
        cssmin: {
            css: {
                src: 'dist/app.css',
                dest: 'dist/app.min.css'
            }
        },
        uglify: {
            js: {
                src: 'dist/app.js',
                dest: 'dist/app.min.js'
            }
        },
        watch: {
            css: {
                files: ['src/css/**/*.css'],
                tasks: ['concat:css', 'cssmin:css']
            },
            js: {
                files: ['src/js/**/*.js'],
                tasks: ['concat:js', 'uglify:js']
            }
        }
    });

    // 2 - Загружаем нужные плагины
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 3 - Говорим grunt, что мы хотим сделать, когда напечатаем grunt в терминале.
    grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

};

4 — печатаем grunt в терминали

$ grunt
Running "concat:js" (concat) task
File gapi.js created.

Running "uglify:js" (uglify) task
>> 1 file created.

Done, without errors.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s