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

08 Nov 2014

На проекте есть папка с с 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.

Теги: css grunt javascript

Категории: Разработка