Frames

Gulpfile.js

0
1
2
3
4
5
6
7
8
9
10
11
12
13
1const { src, dest, series, watch, parallel } = require('gulp');
2const sass = require('gulp-sass');//save
3const rename = require("gulp-rename");
4const plumber = require("gulp-plumber");//save
5const cleanCSS = require('gulp-clean-css');//save
6const autoprefixer = require("gulp-autoprefixer");//save
7const browserSync = require('browser-sync').create();
8const nodemon = require('gulp-nodemon');//save
9
10var sassOptions = {
11 errLogToConsole: true,
12 outputStyle: "expanded",
13 includePaths: "./node_modules"
14};
15
16path = {
17 scss: "./public/sass",
18 css: "./public/css",
19 img: "./public/images",
20 js: "./public/scripts"
21}
22
23watched = { scss: path.scss + '/*.scss' }
24
25// Compile CSS
26function css(){
27 return src( watched.scss )
28 .pipe( plumber() )
29 .pipe( sass(sassOptions) )
30 .pipe( autoprefixer({ cascade: false }) )
31 .pipe( dest(path.css) )
32 .pipe( rename({ suffix: ".min" }) )
33 .pipe( cleanCSS() )
34 .pipe( dest(path.css) )
35 .pipe( browserSync.reload({ stream: true }) );
36}
37
38// BrowserSync
39function bsync(done){
40 browserSync.init({
41 watch: true,
42 files: [ watched.scss, watched.html ],
43 proxy: "localhost:3000",
44 port: "4000"
45 }); done();
46 }
47
48// Nodemon
49function nmon(cb){
50 var started = false;
51 return nodemon({
52 script: 'bin/www'
53 }).on('start', function(){
54 if(!started){
55 cb();
56 started = true;
57 }
58 });
59}
60
61// Watch files
62function watchFiles(done){
63 watch( watched.scss, css );
64 done();
65}
66
67// Start serve before broserSync task
68exports.default = parallel( series(css, watchFiles), nmon, bsync );
Load all gulp methods