The JavaScript Task Runner
Grunt - сборщик проектов● Написан на JavaScript для Node.js● Выполняет задачи (tasks)● Конфиг — обычный JS-файл● Текущая в...
Пример: структура проекта+ [src]- foo.js- bar.js- main.js- main.min.js
Пример: установкаnpm uninstall -g gruntnpm install -g grunt-clinpm initnpm install grunt --save-devnpm install grunt-contr...
Пример: Gruntfile.jsmodule.exports = function(grunt){grunt.initConfig({//task settings go here});grunt.loadNpmTasks(grunt-...
Пример: настройка задачjshint: {all: [Gruntfile.js, src/*.js]},concat: {dist: { src: src/*.js, dest: main.js }},uglify: {a...
Пример: запускаем$ gruntRunning "jshint:all" (jshint) task>> 3 files lint free.Running "concat:dist" (concat) taskFile "ma...
Установка: package.json{"name": "grunt-usage-example","version": "0.1.0","devDependencies": {"grunt-contrib-jshint": "~0.4...
Шаблоны проектов: grunt-init$ npm install -g grunt-init$ git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-i...
Basic tasksgrunt.registerTask(myAliasTask, [jshint, concat, uglify]);grunt.registerTask(myCustomTask, function(){grunt.log...
Multi tasks: описаниеgrunt.initConfig({myMultiTask: {first: Single string,second: [1, 2, 3]}});grunt.registerMultiTask(myM...
Multi tasks: использование$ grunt myMultiTask:firstRunning "myMultiTask:first" (myMultiTask) taskfirst : Single stringDone...
Раздельные конфигурацииgrunt.initConfig({jshint: {debug: { ... },release: { ... }}// ...// Same for concat and uglify});gr...
Файлы: сокращенный форматgrunt.initConfig({myTask: {myTarget: { // сompact formatsrc: [src/header.txt, src/*.js],dest: mai...
Файлы: объект filesgrunt.initConfig({myTask: {myTarget: { // files object formatfiles: {main.js: [src/header.txt, src/*.js...
Файлы: массив filesgrunt.initConfig({myTask: {myTarget: { // files array formatfiles: [{ src: [src/header.txt, src/*.js],d...
Свойства контекста: multi taskgrunt.registerMultiTask(myMultiTask, function(){var task = this;grunt.log.error(Something we...
Свойства контекста: значения$ grunt myMultiTask:first:secondRunning "myMultiTask:first:second" (myMultiTask) task>> Someth...
Асинхронные задачи: описаниеgrunt.registerTask(asyncTask, function() {var done = this.async();console.time(Completed in );...
Асинхронные задачи: выполнение$ grunt asyncTaskRunning "asyncTask" taskCompleted in : 1002msDone, without errors.
Программный запуск других задачgrunt.registerTask(myTask, function() {grunt.task.run(foo, bar);grunt.task.run([bar, baz]);...
Upcoming SlideShare
Loading in …5
×

Сборка JavaScript-проектов с помощью Grunt

2,027
-1

Published on

by Igor Zalutsky on Frontend DEV Conf'13
http://bit.ly/Igor_Zalutsky

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,027
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Сборка JavaScript-проектов с помощью Grunt

  1. 1. The JavaScript Task Runner
  2. 2. Grunt - сборщик проектов● Написан на JavaScript для Node.js● Выполняет задачи (tasks)● Конфиг — обычный JS-файл● Текущая версия — 0.4● Используется в jQuery, Modernizr, ...
  3. 3. Пример: структура проекта+ [src]- foo.js- bar.js- main.js- main.min.js
  4. 4. Пример: установкаnpm uninstall -g gruntnpm install -g grunt-clinpm initnpm install grunt --save-devnpm install grunt-contrib-jshint --save-devnpm install grunt-contrib-uglify --save-devnpm install grunt-contrib-concat --save-dev
  5. 5. Пример: Gruntfile.jsmodule.exports = function(grunt){grunt.initConfig({//task settings go here});grunt.loadNpmTasks(grunt-contrib-jshint);grunt.loadNpmTasks(grunt-contrib-concat);grunt.loadNpmTasks(grunt-contrib-uglify);grunt.registerTask(default, [jshint, concat, uglify]);};
  6. 6. Пример: настройка задачjshint: {all: [Gruntfile.js, src/*.js]},concat: {dist: { src: src/*.js, dest: main.js }},uglify: {all: { files: { main.min.js: [main.js] } }}
  7. 7. Пример: запускаем$ gruntRunning "jshint:all" (jshint) task>> 3 files lint free.Running "concat:dist" (concat) taskFile "main.js" created.Running "uglify:all" (uglify) taskFile "main.min.js" created.Done, without errors.
  8. 8. Установка: package.json{"name": "grunt-usage-example","version": "0.1.0","devDependencies": {"grunt-contrib-jshint": "~0.4.3","grunt-contrib-uglify": "~0.2.0","grunt-contrib-concat": "~0.2.0","grunt": "~0.4.1"}}
  9. 9. Шаблоны проектов: grunt-init$ npm install -g grunt-init$ git clone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery$ grunt-init jquery
  10. 10. Basic tasksgrunt.registerTask(myAliasTask, [jshint, concat, uglify]);grunt.registerTask(myCustomTask, function(){grunt.log.writeln( Current task name: + this.name);});
  11. 11. Multi tasks: описаниеgrunt.initConfig({myMultiTask: {first: Single string,second: [1, 2, 3]}});grunt.registerMultiTask(myMultiTask, function(){grunt.log.writeln(this.target + : + this.data);});
  12. 12. Multi tasks: использование$ grunt myMultiTask:firstRunning "myMultiTask:first" (myMultiTask) taskfirst : Single stringDone, without errors.$ grunt myMultiTask:secondRunning "myMultiTask:second" (myMultiTask) tasksecond : 1,2,3Done, without errors.
  13. 13. Раздельные конфигурацииgrunt.initConfig({jshint: {debug: { ... },release: { ... }}// ...// Same for concat and uglify});grunt.registerTask(debug, [jshint:debug, concat:debug,uglify:debug]);grunt.registerTask(release, [jshint:release, concat:release, uglify:release]);
  14. 14. Файлы: сокращенный форматgrunt.initConfig({myTask: {myTarget: { // сompact formatsrc: [src/header.txt, src/*.js],dest: main.js,nonull: true}}});
  15. 15. Файлы: объект filesgrunt.initConfig({myTask: {myTarget: { // files object formatfiles: {main.js: [src/header.txt, src/*.js],libs.js: [lib/*.js]}}}});
  16. 16. Файлы: массив filesgrunt.initConfig({myTask: {myTarget: { // files array formatfiles: [{ src: [src/header.txt, src/*.js],dest: main.js, nonull: true },{ src: [lib/*.js], dest: libs.js }]}}});
  17. 17. Свойства контекста: multi taskgrunt.registerMultiTask(myMultiTask, function(){var task = this;grunt.log.error(Something went wrong); // errorCount++[name, nameArgs, args, errorCount, target].forEach(function(propName){grunt.log.writeln(propName + : + task[propName]);});});
  18. 18. Свойства контекста: значения$ grunt myMultiTask:first:secondRunning "myMultiTask:first:second" (myMultiTask) task>> Something went wrongname: myMultiTasknameArgs: myMultiTask:first:secondargs: seconderrorCount: 1target: first
  19. 19. Асинхронные задачи: описаниеgrunt.registerTask(asyncTask, function() {var done = this.async();console.time(Completed in );setTimeout(function(){console.timeEnd(Completed in );done();}, 1000);});
  20. 20. Асинхронные задачи: выполнение$ grunt asyncTaskRunning "asyncTask" taskCompleted in : 1002msDone, without errors.
  21. 21. Программный запуск других задачgrunt.registerTask(myTask, function() {grunt.task.run(foo, bar);grunt.task.run([bar, baz]);});
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×