gulpfile.js

'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    rigger = require('gulp-rigger'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    rimraf = require('rimraf'),
    browserSync = require("browser-sync"),
    reload = browserSync.reload;

var path = {
    build: {
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/'
    },
    src: {
        html: 'src/*.html',
        js: 'src/js/main.js',
        style: 'src/style/main.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        style: 'src/style/**/*.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};

var config = {
    server: {
        baseDir: "./build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "Frontend_Devil"
};

gulp.task('webserver', function () {
    browserSync(config);
});

gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

gulp.task('html:build', function () {
    gulp.src(path.src.html) 
        .pipe(rigger())
        .pipe(gulp.dest(path.build.html))
        .pipe(reload({stream: true}));
});

gulp.task('js:build', function () {
    gulp.src(path.src.js) 
        .pipe(rigger()) 
        .pipe(sourcemaps.init()) 
        .pipe(uglify()) 
        .pipe(sourcemaps.write()) 
        .pipe(gulp.dest(path.build.js))
        .pipe(reload({stream: true}));
});

gulp.task('style:build', function () {
    gulp.src(path.src.style) 
        .pipe(sourcemaps.init())
        .pipe(sass({
            sourceMap: true,
            errLogToConsole: true
        }))
        .pipe(prefixer())
        .pipe(cssmin())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css))
        .pipe(reload({stream: true}));
});

gulp.task('image:build', function () {
    gulp.src(path.src.img) 
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img))
        .pipe(reload({stream: true}));
});

gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts))
});

gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build'
]);


gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});


gulp.task('default', ['build', 'webserver', 'watch']);

Спасибо. Наконец разобрался с сборщиками проекта.

Спасибо огромное.

Отличное решение.

Спасибо! Я вроде бы пользовался теми же инструментами, но, как оказывается, совсем не так. У вашего решения скорость и логичность гораздо выше чем у той «инфраструктуры», которая у меня использовалась уже год.

Большое спасибо!

Статейка хорошая получилась :)
http://habrahabr.ru/post/250569/

Отличная идея - разделять задачи по разным файлам (чтобы лучше ориентироваться) и использовать gulp-load-plugins для "ленивой" загрузки модулей.
Подробнее про ленивую загрузку всего и вся тут
Действительно лучший тутор по Gulp.js

Спасибо!

А можно ли сделать autoreload c помощью browsersync, только на удаленном сервере?

Прекрасная статья! Спасибо!

Це геніально! Дуже дякую!

Очень содержательное руководство с множеством полезных фишек.
Insayt-у огромная благодарность.!!!

Отличный тутор!

Просто супер для начинающего!!

Дякую! Все просто і зрозуміло. Було б цікаво почитати в такому стилі про конфіг Вебпака, це був би бестселер))!

C:\Users\evgen.burlak\Desktop\gulpie>gulp
C:\Users\evgen.burlak\Desktop\gulpie\node_modules\gulp-sass\node_modules\node-sa
ss\lib\index.js:22
throw new Error('libsass bindings not found. Try reinstalling node-sass?
');
^
Error: libsass bindings not found. Try reinstalling node-sass?
at getBinding (C:\Users\evgen.burlak\Desktop\gulpie\node_modules\gulp-sass\n
ode_modules\node-sass\lib\index.js:22:11)
at Object. (C:\Users\evgen.burlak\Desktop\gulpie\node_modules\gul
p-sass\node_modules\node-sass\lib\index.js:188:23)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\evgen.burlak\Desktop\gulpie\node_modules\gul
p-sass\index.js:3:17)

подскажите как решить эту проблему

Вирішення проблеми:
Error: libsass bindings not found. Try reinstalling node-sass?
http://stackoverflow.com/questions/29461831/libsass-bindings-not-found-when-using-node-sass-in-nodejs/32946197#32946197

Starting 'style:build'...
[20:03:02] 'style:build' errored after 1.76 ms
[20:03:02] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (E:\Front End\projects\myPortfolio\node_modules\through2\node_modules\readable-stream\lib_stream_readable.js:489:8)
at Gulp. (E:\Front End\projects\myPortfolio\gulpfile.js:73:10)
at module.exports (E:\Front End\projects\myPortfolio\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (E:\Front End\projects\myPortfolio\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (E:\Front End\projects\myPortfolio\node_modules\orchestrator\index.js:214:10)
at E:\Front End\projects\myPortfolio\node_modules\orchestrator\index.js:279:18
at finish (E:\Front End\projects\myPortfolio\node_modules\orchestrator\lib\runTask.js:21:8)
at module.exports (E:\Front End\projects\myPortfolio\node_modules\orchestrator\lib\runTask.js:60:3)
at Gulp.Orchestrator._runTask (E:\Front End\projects\myPortfolio\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (E:\Front End\projects\myPortfolio\node_modules\orchestrator\index.js:214:10)

в чем может быть проблема?

Шикарно! Спасибо. Надо еще сборку свг спрайта туда прикрутить

Всё по полочкам. Спасибо))

очень годная статья, спасибо огромное.

Спасибо за Ваши старания, статья и правда шикарная =))

У меня не обновляет автоматически когда я сохраняю HTML документ, в чем может быть бок? Подскажите плиз.

Предлагаю изменить путь для rimraf, чтобы он не затирал всю папку build и ускорить формирование проекта. Мы же хотим удалять только картинки, поэтому прописать clean: './build/img/.'

Спасибки, пригодилось

почему при написании gulp у меня выдает ошибку? Хотя все сделал по инструкции!

может кто ответить?

λ gulp
assert.js:341
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (D:\web documents\Projects\crm\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (D:\web documents\Projects\crm\node_modules\undertaker\lib\task.js:13:8)
at Object. (D:\web documents\Projects\crm\gulpfile.js:108:6)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at execute (C:\Users\example\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^4.0.0\index.js:36:18)

как решить проблемму

λ gulp
assert.js:341
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (D:\web documents\Projects\crm\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (D:\web documents\Projects\crm\node_modules\undertaker\lib\task.js:13:8)
at Object. (D:\web documents\Projects\crm\gulpfile.js:108:6)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at execute (C:\Users\example\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned^4.0.0\index.js:36:18)

как решить проблемму

удали gulp 4.0.0

npm remove gulp

и установи 3.9.1

npm install gulp@3.9.1

Обновленный код gulpfile.js для версии Gulp >= 4
`const {task, src, dest, watch, series, parallel} = require('gulp'),
prefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
rigger = require('gulp-rigger'),
cssmin = require('gulp-minify-css'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
rimraf = require('rimraf')

const path = {
build: {
html: 'build/',
js: 'build/js/',
css: 'build/css/',
img: 'build/img/',
fonts: 'build/fonts/'
},
src: {
html: 'src/.html',
js: 'src/js/main.js',
style: 'src/style/main.scss',
img: 'src/img/**/.',
fonts: 'src/fonts/**/.'
},
watch: {
html: 'src/**/.html',
js: 'src/js//*.js',
style: 'src/style//.scss',
img: 'src/img/**/.',
fonts: 'src/fonts/**/.*'
},
clean: './build'
}

task('clean', function (cb) {
rimraf(path.clean, cb)
})

task('html:build', function (done) {
src(path.src.html)
.pipe(rigger())
.pipe(dest(path.build.html))

done()
})

task('js:build', function (done) {
src(path.src.js)
.pipe(rigger())
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(dest(path.build.js))

done()
})

task('style:build', function (done) {
src(path.src.style)
.pipe(sourcemaps.init())
.pipe(sass({
sourceMap: true,
errLogToConsole: true
}))
.pipe(prefixer())
.pipe(cssmin())
.pipe(sourcemaps.write())
.pipe(dest(path.build.css))

done()
})

task('image:build', function (done) {
src(path.src.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()],
interlaced: true
}))
.pipe(dest(path.build.img))

done()
})

task('fonts:build', function (done) {
src(path.src.fonts)
.pipe(dest(path.build.fonts))

done()
})

task('build', series(
'html:build',
'js:build',
'style:build',
'fonts:build',
'image:build'
))

task('watch', parallel([
() => {
return watch(path.watch.html, series('html:build'))
},
() => {
return watch(path.watch.style, series('style:build'))
},
() => {
return watch(path.watch.js, series('js:build'))
},
() => {
return watch(path.watch.img, series('image:build'))
},
() => {
return watch(path.watch.fonts, series('fonts:build'))
}
]))

task('default', function (done) {
console.log('TODO')
done()
})`