Сборка проекта с помощью GULP

Gulp — это инструмент сборки веб-приложения, позволяющий автоматизировать повторяющиеся задачи, такие как сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и т.д. Тем самым Gulp ускоряет и оптимизирует процесс веб-разработки.

Что такое Gulp

Gulp vs Grunt

"Gulp is a streaming build system".

Think Grunt, but faster and less config.

  • Focus on configuration
  • Focus on code
  • Stream based
  • File based
  • Plugins are designed to do one thing only
  • Plugins often perform multiple tasks
  • Uses leaner, simpler JavaScript code
  • Uses JSON-like data configuration files

.less

.less

.less

.css

.min.css

.less

.less

.min.css

concat()

less()

minify()

rename()

PIPE

1. Установка

Install Node

npm install -g gulp

Install Gulp

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

2. Настройка package.json

$ npm init

package.json

Создаем новый node проект

{
  "name": "project-name",
  "version": "1.0.0",
  ...
}
$ npm install --save-dev gulp
{
  "name": "project-name",
  "version": "1.0.0",
  ...
  "devDependencies": {
    "gulp": "^3.9.0"
  }
}

package.json

Добавляем gulp в проект

3. Создаем gulpfile.js

$ touch gulpfile.js
var gulp = require('gulp');

gulpfile.js

Создаем gulpfile.js

4. Gulp tasks

var gulp = require('gulp');

gulp.task('taskName1', function(){

  ...

});

gulp.task('default', ['taskName1', 'taskName2']);

gulpfile.js

$ gulp taskName1

Run task

Резюме

1. Установка

2. Натсройка package.json

3. Создаем gulpfile.js

4. Gulp tasks

3 основных понятия:

1. Плагины (Plugins)

2. Потоки (Streams)

3. Задачи (Tasks)

Ядро функциональности Gulp

Связь между задачами

Место, чтобы взаимодействовать с помощью плагинов

Gulp API

gulp.task('taskName', [dependencies],  function(done){

  ...

});

gulp.task

gulp.task('default', ['taskName1', 'taskName2']);
gulp.src(['source/styles/*.css', '...'])

gulp.src

gulp.src(['...', 'build/styles/*.css'])

gulp.dest

gulp.src('source/styles/*.css')
    .pipe(gulp.dest('build/styles/'));
gulp.watch('source/styles/*.css', ['taskName']);

gulp.watch

Популярные Плагины и задачи

var gulp = require('gulp');
var concat = require('gulp-concat');


gulp.task('css', function(){
  gulp.src('source/styles/*.css')
    .pipe(concat('style.css'))
    .pipe(gulp.dest('build/styles/'));
});

Concat files

$ npm install --save-dev gulp-concat

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(less())
    .pipe(gulp.dest('build/styles/'));
});

Compile less files

$ npm install --save-dev gulp-less

gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');


gulp.task('js', function(){
  gulp.src('source/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('build/js/'));
});

Minify Javascript

npm install --save-dev gulp-uglify

gulpfile.js

var gulp = require('gulp');
var minify = require('gulp-minify-css');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(minify({ keepBreaks: true }))
    .pipe(gulp.dest('build/styles/'));
});

Minify CSS

npm install --save-dev gulp-minify-css

gulpfile.js

var gulp = require('gulp');
var rename = require('gulp-rename');


gulp.task('css', function(){
  gulp.src('source/styles/*.less')
    .pipe(minify({ keepBreaks: true }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('build/styles/'));
});

Rename

npm install --save-dev gulp-rename

gulpfile.js

var gulp        = require("gulp");
var sass        = require("gulp-sass");
var browserSync = require("browser-sync").create();

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

Browser-sync

npm install browser-sync --save-dev

gulpfile.js

gulp.task('watch', function(){
  gulp.watch(['source/styles/components/*.css'], ['css']);
  gulp.watch(['source/styles/*.less'], ['less']);
  gulp.watch(['source/js/*.js'], ['js']);
  gulp.watch(['source/*.html'], ['html']);
  gulp.watch(['source/img/**/*'], ['images']);
  gulp.watch(['source/fonts/**/*'], ['fonts']);
});

gulp.task('build', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

Watch

gulpfile.js

Grunt требует плагин для этого; Gulp имеет встроенный.

http://gulpjs.com/plugins/

Как запустить Gulp?

var gulp = require('gulp');

...

gulp.task('default', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

gulpfile.js

$ gulp

command line

var gulp = require('gulp');

...

gulp.task('myGulp', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);

gulpfile.js

$ gulp myGulp

command line

Резюме

1. Установка (Node & Gulp)

2. Настройка и старт проекта

3. Создаем задачи (tasks)

4. 3 основных поянтия

5. Gulp API & plugins

Plugins

Streams

Tasks

gulp.thank(you)

FRONT-END WORKFLOW WITH GULP

By Alexey Kalyuzhnyi

Source: Adrián Bolonio

FRONT-END WORKFLOW WITH GULP

FRONT-END WORKFLOW WITH GULP

  • 2,514

More from Alexey Kalyuzhnyi