Created
May 18, 2019 11:54
-
-
Save atereshhuk/de033f0a8048266b7034c5e4f3f6567e to your computer and use it in GitHub Desktop.
Gulp 4 Config
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const gulp = require('gulp'), | |
gulpPug = require('gulp-pug'), | |
gulpSass = require('gulp-sass'), | |
gulpBrowserSync = require('browser-sync').create(); | |
// Style syntax | |
const syntax = "scss"; | |
// Gulp tasks | |
// Create folders structure | |
gulp.task('folders', function () { | |
return gulp.src('*.*', { | |
read: false | |
}) | |
// src | |
.pipe(gulp.dest('src/img')) | |
.pipe(gulp.dest('src/vendors')) | |
.pipe(gulp.dest(`src/styles/${syntax}`)) | |
.pipe(gulp.dest('src/js')) | |
}); | |
// Compile pug files into HTML | |
gulp.task('pug', function () { | |
return gulp.src('src/*.pug') | |
.pipe(gulpPug({ | |
"pretty": true | |
})) | |
.pipe(gulp.dest('src')); | |
}); | |
// Compile style files into CSS | |
gulp.task('styles', function () { | |
return gulp.src(`src/styles/${syntax}/style.${syntax}`) | |
.pipe(gulpSass({ | |
includePaths: [`src/styles/${syntax}`], | |
errLogToConsole: true, | |
outputStyle: 'compact' | |
})) | |
.pipe(gulp.dest('src/css')); | |
}); | |
gulp.task('browser-sync', function(){ | |
gulpBrowserSync.init({ | |
server: { | |
baseDir: "src/" | |
}, | |
notify: false, | |
reloadDelay: 500, | |
open: false | |
}); | |
}); | |
// js | |
gulp.task('scripts', function () { | |
return gulp.src('src/js/*.js') | |
.pipe(gulp.dest('src/js')) | |
}); | |
// Serve and watch sass/pug files for changes | |
gulp.task('watch', function () { | |
gulp.watch(`src/styles/${syntax}/*.${syntax}`, gulp.parallel('styles')); | |
gulp.watch('src/*.pug', gulp.parallel('pug')); | |
gulp.watch('src/index.html').on('change', gulpBrowserSync.reload); | |
gulp.watch('src/css/style.css').on('change', gulpBrowserSync.reload); | |
gulp.watch('src/js/*.js', gulp.parallel('scripts')).on('change', gulpBrowserSync.reload); | |
}); | |
// Main GULP Task | |
// Create folders structure | |
gulp.task('folders', gulp.series('folders')); | |
// Task for work | |
gulp.task('default', gulp.parallel('browser-sync', 'watch', 'styles', 'pug', 'scripts')); | |
// Task for build a project | |
// gulp.task('build') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "app", | |
"version": "1.0.0", | |
"description": "", | |
"main": "index.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "Aleksandr Tereshchuk", | |
"license": "ISC", | |
"devDependencies": { | |
"browser-sync": "^2.26.5", | |
"gulp": "^4.0.2", | |
"gulp-pug": "^4.0.1", | |
"gulp-sass": "^4.0.2" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment