Введение в Gulp | Пример gulpfile.js

Gulp - это …

Gulp - это система сборки проектов, впервые появившаяся в 2015 году, которая, в качестве платформы, использует Node.js. Gulp использует JavaScript инструкции, помогающие выполнять фронтэнд задачи и, буквально, собирать крупномасштабные веб-приложения и сайты.

Gulp, при наличии соответствующих плагинов, автоматизирует такие задачи как: конкатенация и минификация файлов, компиляция CSS и HTML препроцессоров и многие другие.

Запуск выполнения задач осуществляется через терминал (консоль) с помощью определенных команд.

Почему Gulp?

Помимо Gulp существует немало других сборщиков проектов, например Grunt или Broccoli, однако причины, по которым Gulp существенно опережает их, будут следующими:

Скорость - благодаря использованию Node.js.
Простота - написание Gulpfile.js выглядит более понятным и очевидным,чем например, написание Grunfile.js для системы сборки Grunt.
Множество плагинов - для Gulp написано огромное количество плагинов, из которых Вы, вполне, можете найти подходящий под вашу задачу.
Использует JavaScript - Gulp работает на Node.js, поэтому для конфигурации Gulpfile.js Вам потребуется знать только JavaScript.

Gulpfile.js

Gulpfile.js является главным файлом, в котором осуществляется управление задачами и конфигурирование плагинов. Для каждого проекта, gulpfile.js будет отличаться, т.к. это зависит от того какие плагины Вы будете использовать и какие задачи перед Вами стоят.

Пример Gulpfile.js Вы можете видеть ниже:

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use any package available on npm
gulp.task('clean', function() {
  // You can use multiple globbing patterns as you would with `gulp.src`
  return del(['build']);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);

var gulp = require('gulp');

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

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

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

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

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

var del = require('del');

var paths = {

scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],

images: 'client/img/**/*'

};

// Not all tasks need to use streams

// A gulpfile is just another node program and you can use any package available on npm

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

// You can use multiple globbing patterns as you would with `gulp.src`

return del(['build']);

});

gulp.task('scripts', ['clean'], function() {

// Minify and copy all JavaScript (except vendor scripts)

// with sourcemaps all the way down

return gulp.src(paths.scripts)

.pipe(sourcemaps.init())

.pipe(coffee())

.pipe(uglify())

.pipe(concat('all.min.js'))

.pipe(sourcemaps.write())

.pipe(gulp.dest('build/js'));

});

// Copy all static images

gulp.task('images', ['clean'], function() {

return gulp.src(paths.images)

// Pass in options to the task

.pipe(imagemin({optimizationLevel: 5}))

.pipe(gulp.dest('build/img'));

});

// Rerun the task when a file changes

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

gulp.watch(paths.scripts, ['scripts']);

gulp.watch(paths.images, ['images']);

});

// The default task (called when you run `gulp` from cli)

gulp.task('default', ['watch', 'scripts', 'images']);