More Related Content More from Dmitri Kunin (10) GruntJs Installation and popular plugins. MoscowJS2. ДВА СЛОВА О СЕБЕ
Дмитрий Кунин
ведущий разработчик AT-Consulting
энтузиаст javascript
жутко ленивый парень
7. УСТАНОВКА РАЗ И НАВСЕГДА
npm install -g grunt-cli
УСТАНОВКА В ПРОЕКТ
npm install grunt --save-dev
8. УСТАНОВКА И НАСТРОЙКА
ШАБЛОНИЗАТОРА
npm install -g grunt-init
git clone git@github.com:gruntjs/grunt-init-TEMPLATE.git ~/.grunt-ini
TEMPLATES:
grunt-init-commonjs
grunt-init-gruntfile
grunt-init-gruntplugin
grunt-init-jquery
grunt-init-node
10. СТРУКТУРА GRUNTFILE
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
};
12. УСТАНОВКА ПЛАГИНА
npm install grunt-contrib-concat
npm install grunt-contrib-concat --save
npm install grunt-contrib-concat --save-dev
grunt.loadNpmTasks('grunt-contrib-watch');
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
15. ЗАПУСК ЗАДАЧ
grunt build
grunt build:test
grunt connect:smth
grunt.registerTask('update', function(message){
globalConfig.message = message;
grunt.task.run('bgShell:gitCi');
});
bgShell: {
_defaults: {
bg: false
},
gitCi: {
cmd: 'git commit -am "<%= globalConfig.message %>"',
}
},
23. JSHINT
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'app/scripts/{,*/}*.js',
'!app/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
}
{
"node": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"jquery": true
}
26. USEMIN
prepeareUsemin -> concat/uglify-> usemin
<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/moon.css">
<link rel="stylesheet" href="css/zenburn.css">
<!-- endbuild -- >
<!-- build:js js/app.js -->
<script src="js/reveal.js"></script>
<script src="js/init.js"></script">
<!-- endbuild -- >
28. РАЗНОЕ
Открытие страницы
Удаление временных папок
Архивация
Выгрузка на фтп
Бампинг package.json файла
CDN замена скриптов
npm install grunt-open --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-compress --save-dev
npm install grunt-ftp-deploy --save-dev
npm install grunt-bumpup --save-dev
npm install grunt-google-cdn --save-dev
32. ФИНАЛЬНЫЙ ХИНТ
~/.bash_profile
# Установка grunt плагина с сохранением в dev зависимости
function gi() {
npm install --save-dev grunt-"$@"
}
# Установка grunt-contrib плагина с сохранением в dev зависимости
function gci() {
npm install --save-dev grunt-contrib-"$@"
}