var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
//Компиляция SASS
gulp.task('sass', function() {
 gulp.src('app/scss/*.scss')
 .pipe(sass())
 .on('error', log)
 .pipe(gulp.dest('app/css'))
 .pipe(browserSync.stream());
});
// Запускаем локальный сервер (только после компиляции
sass)
gulp.task('server', ['sass'], function() {
 browserSync.init({
 notify: false,
 port: 9000,
 server: {
 baseDir: 'app'
 }
 });
});

// слежка и запуск задач
gulp.task('watch', function() {
 gulp.watch('app/scss/*.scss', ['sass']);
 gulp.watch([
 'app/**/*.html',
 'app/js/**/*.js'
 ]).on('change', browserSync.reload);
 gulp.watch([
 'app/css/**/*.css'
 ]).on('change', browserSync.reload);
});
// Задача по-умолчанию
gulp.task('default', ['server', 'watch']);

---------------
Пример использования при склеивании файлов:
var gulp = require('gulp'),
 concatCss = require('gulp-concat-css');
gulp.task('default', function () {
 return gulp.src('app/**/*.css')
 .pipe( concatCss('fullstyle.css') )
 .pipe( gulp.dest('app/css/') );
});
---------
Использоание:
var gulp = require('gulp');
gulp.task('default', function() {
 console.log('default task');
});
Использоание с deps:
var gulp = require('gulp');
gulp.task('default', ['your_task_1', 'your_task_2'],
function() {
 console.log('default task');
});
----------
Чтобы выполнить синхронно задачу:
1) Передать callback:
gulp.task('callback_task', function(callback_func) {
 // любая асинхронная задача
 setTimeout(function () {
 callback_func();
 }, 500);
});
2) Вернуть поток:
gulp.task('stream_task', function() {
 return gulp.src('app/**/*.css')
 .pipe( concatCss('fullstyle.css') )
 .pipe( gulp.dest('app/css/') );
});
3) Вернуть промис:
gulp.task('promise_task', function() {
 var deferred = Q.defer();
 // любая асинхронная задача
 setTimeout(function () {
 deferred.resolve();
 }, 500);
 return deferred.promise;
});
Выполняем задачи последовательно:
var gulp = require('gulp');
// Первая задача
gulp.task('first_task', function() { });
// Вторая задача
gulp.task('second_task', ['first_task'], function() {
 // Не запустится пока не выполнится первая задача
});
gulp.task('default', ['first_task', 'second_task'],
function() { });
-----------
var watcher = gulp.watch('js/**/*.js', ['task_1',
'task_2']);
watcher.on('change', function(event) {
 console.log('File change - running tasks...');
});
gulp.watch(glob[, opts, cb]) (вариант 2)



------
Gulp-concat-css
Модуль для склеивания css файлов
-------
var gulp = require('gulp'),
 concatCss = require('gulp-concat-css');
gulp.task('default', function () {
 return gulp.src('app/**/*.css')
 .pipe( concatCss('fullstyle.css') )
 .pipe( gulp.dest('app/css/') );
});
-------
Gulp-minify-css
Модуль для минификации css файлов
------
var gulp = require('gulp'),
 concatCss = require('gulp-concat-css'),
 minifyCss = require('gulp-minifycss');
gulp.task('default', function () {
 return gulp.src('app/**/*.css')
 .pipe( concatCss('fullstyle.css') )
 .pipe( minifyCss() )
 .pipe( gulp.dest('app/css/') );
});
-----
Gulp-rename
Модуль для переименования файлов
-----
Строка:
var gulp = require('gulp'),
 rename = require('gulp-rename');
gulp.task('default', function () {
 return gulp.src('app/**/*.js')
 .pipe( rename('new.js') )
 .pipe( gulp.dest('dist/js/') );
});
Callback-функция:
gulp.task('default', function () {
 return gulp.src('app/**/*.js')
 .pipe( rename( function (path) {
 path.dirname += '/js';
 path.basename += 'new';
 path.extname = '.js'
 }))
 .pipe( gulp.dest('dist') );
});
Hash:
gulp.task('default', function () {
 return gulp.src('app/**/*.js')
 .pipe( rename( {
 dirname : '/js',
 basename : 'new',
 prefix : 'pre-',
 suffix : '.full',
 extname : '.js'
 } )
 .pipe( gulp.dest('dist') );
});
------
Gulp-uglify
Модуль для минификации js файлов
------
var gulp = require('gulp'),
 rename = require('gulp-rename'),
 uglify = require('gulp-uglify');
gulp.task('default', function () {
 return gulp.src('app/**/*.js')
 .pipe( uglify() )
 .pipe( rename('main.min.js') )
 .pipe( gulp.dest('dist/js') );
});
------
Gulp-autoprefixer
Модуль для управления браузерными префиксами
------
var gulp = require('gulp'),
 autoprefixer = require('gulp-autoprefixer');
gulp.task('default', function () {
 return gulp.src('app/**/*.css')
 .pipe( autoprefixer({
 browsers: ['last 2 versions'],
 cascade: false
 }))
 .pipe( gulp.dest('dist/js') );
});
------
Gulp-sass
Модуль для компиляции sass файлов
------
var gulp = require('gulp'),
 sass = require('gulp-sass');
gulp.task('sass_task', function () {
 gulp.src('app/**/*.sass')
 .pipe( sass({outputStyle: 'compressed'}) )
 .pipe(gulp.dest('dist/css'));
});
------
Gulp-uncss
Модуль для оптимизации css файлов, на основе использования в html
------
var gulp = require('gulp'),
 uncss = require('gulp-uncss');
gulp.task('sass_task', function () {
 gulp.src('app/**/*.css')
 .pipe( uncss({ html: [ 'app/index.html' ] })
)
 .pipe(gulp.dest('dist/css'));
});
------
Gulp-imagemin
Модуль для сжатия изображений
------
var gulp = require('gulp'),
 imagemin = require('gulp-imagemin');
gulp.task('imagemin_task', function () {
 gulp.src('app/img/**/*')
 .pipe( imagemin( {
 progressive: true,
 interlaced: true
 } )
 .pipe(gulp.dest('dist/css'));
 ) );
});
------
Del
Модуль для удаления папок и файлов
------
var del = require('del');
del(['tmp/*.js', '!tmp/unicorn.js'], function (err,
paths) {
 console.log('Deleted files/folders:\n', paths.
join('\n'));
});
------
Gulp-util
Модуль утилит
------
var gutil = require('gulp-util');
gutil.log('stuff happened', 'Really it did', gutil.
colors.magenta('123'));
------
Vinyl-ftp
Модуль для работы по ftp
------
var gulp = require('gulp'),
 gutil = require('gulp-util'),
 ftp = require('vinyl-ftp');
gulp.task('deploy', function () {
 var conn = ftp.create({
 host: 'your_host',
 user: 'your_user',
 password: 'your_password',
 parallel: 10,
 log: gutil.log
 });
 var globs = [
 'dist/**/*'
 ];
 return gulp.src(globs, { base: 'dist/', buffer:
false})
 .pipe(conn.dest('public_html/'));
});
------
Browser-sync
Модуль для синхронизации с браузером
------
var gulp = require('gulp'),
 browserSync = require('browser-sync');
gulp.task('browser_sync', function () {
 browserSync({
 port: 9000,
 open: true,
 notify: false,
 server: './app'
 });
});
------
Gulp-useref
Модуль для конкатенации стилей и скриптов через парсинг спец. блоков
------
Спец. блок
<html>
<head>
 <!-- build:css css/combined.css -->
 <link href="css/one.css" rel="stylesheet">
 <link href="css/two.css" rel="stylesheet">
 <!-- endbuild -->
</head>
<body>
 <!-- build:js scripts/combined.js -->
 <script type="text/javascript" src="scripts/one.
js"></script>
 <script type="text/javascript" src="scripts/two.
js"></script>
 <!-- endbuild -->
</body>
</html>
38
Использование:
var gulp = require('gulp'),
 useref = require('gulp-useref');
gulp.task('useref_task', function () {
 var assets = useref.assets();
 gulp.src('app/*.html')
 .pipe( assets )
 .pipe( assets.restore() )
 .pipe( useref() )
 .pipe(gulp.dest('dist'));
});
useref (options)
- options - объект настроек
Результат:
<html>
<head>
 <link href="css/combined.css" rel="stylesheet">
</head>
<body>
 <script type="text/javascript" src="scripts/combined.
js"></script>
</body>
</html>
------
Wiredep
Модуль для автоподключения bower компонентов через спец. блоки
------
Спец. блок
<html>
<head>
 <!-- bower:css -->
 <!-- endbower -->
</head>
<body>
 <!-- bower:js -->
 <!-- endbower -->
</body>
</html>
Использование:
var gulp = require('gulp'),
 wiredep = require('wiredep').stream;
gulp.task('wiredep_task', function () {
 gulp.src('app/templates/*.html')
 .pipe( wiredep ({
 ignorePath: /^(\.\.\/)*\.\./
40
 }) )
 .pipe(gulp.dest('app/temp/templates'));
});
wiredep (options)
- options - объект настроек
Так же можно работать и с jade файлами:
gulp.task('wiredep_jade', function () {
 gulp.src('app/templates/*.jade')
 .pipe( wiredep ({
 ignorePath: /^(\.\.\/)*\.\./
 }) )
 .pipe(gulp.dest('app/temp/templates'));
});
Пропишем в самом jade файле
doctype html
html(lang='ru-RU')
 head
 // bower:css
 // endbower
 script(src='bower/modernizr/modernizr.js')
 body
…
 // bower:js
 // endbower
41
modernizr.js лучше подключить вручную т.к. он должен быть в head
Wiredep автоматически определит какие файлы в какой
последовательности необходимо подключать. Чтобы указать другие файлы
(например чтобы подключить .min файл) необходимо в нашем bower.json
файле указать следующее:
{
 “overrides” : {
 “qtip2” : {
 “main” : [
 “./jquery.qtip.min.js” ,
 “./jquery.qtip.min.css”
 ],
 “dependencies” : {
 “jquery” : “>=1.6.0”
 }
 }
 }
}
main - какие файлы подключать
dependencies - зависимости
------


Gulp Blacklist
------
Нерекомендуемые модули (ссылка на полный список)
gulp-clean use the `del` module
gulp-browserify use the browserify module directly
gulp-rimraf use the `del` module
gulp-image-optimization duplicate of gulp-imagemin
gulp-bower use the bower module directly
gulp-php use PHP directly through gulp-spawn or
ChildProcess.spawn()
gulp-tinypng uses fs to create a temp .gulp folder
gulp-css duplicate of gulp-minify-css
gulp-cssmin duplicate of gulp-minify-css
gulp-clean-old duplicate of gulp-clean
gulp-if-else duplicate of gulp-if
gulp-prettify duplicate of gulp-html-prettify
------
------
------
------
------
------
------
------
------
------