-
-
Save Insayt/272c9b81936a03884768 to your computer and use it in GitHub Desktop.
'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/
Спасибо!
А можно ли сделать 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()
})`
Спасибо огромное.