Help with Gulpjs

Question

Help with Gulpjs

Navigation

#1 by (2 votes)

1

I'm having a little problem with gulp's tasks. I'm trying to listen for file changes with watch and refresh browser with browser sync.

Follow the code:

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var pug         = require('gulp-pug');
var browserSync = require('browser-sync').create();

gulp.task('sass', function(){
    return gulp.src('./sass/*scss')
    .pipe(sass())
    .on('error', function(err){console.log(err.message); })
    .pipe(gulp.dest('./dist/css'))
});


gulp.task('pug', function(){
    return gulp.src('./views/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./dist/pages'))
});

gulp.task('browserSync', function(){
    return browserSync.init(['./dist/pages','./dist/css/*css', './dist/js/*js'], {
        server:{
            baseDir: './'
        }
    })
});

gulp.task('default', ['pug', 'sass', 'browserSync'], function(){
    gulp.watch('./')
});

My Folder Hierarchy:

The message appears in the browser:

Cannot GET /

javascript css gulp

asked by anonymous 06.01.2017 / 23:34

1 answer

SimpleXML does not return data from file [closed] call .keypress (e) only if .change (e) is OK

score 2 · Answer 1

I was able to sort this out! I'll post the code and the explanation so I can help other people.

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var pug         = require('gulp-pug');
var browserSync = require('browser-sync').create();

gulp.task('sass', function(){
    return gulp.src('./sass/*scss')
    .pipe(sass())
    .on('error', function(err){console.log(err.message); })
    .pipe(gulp.dest('./dist/css'))
});


gulp.task('pug', function(){
    return gulp.src('./views/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./dist/pages'))
});

gulp.task('browserSync', function(){
    return browserSync.init(['./dist/pages/*.html','./dist/css/*.css', './dist/js/*.js'], {
        server:{
            baseDir: './',
            index: './dist/pages/index.html'
        }
    })
});

gulp.task('default', ['pug', 'sass', 'browserSync'], function(){
    gulp.watch(['./sass/*scss','./views/*pug'], ['sass', 'pug'])
});

Some details were missing, such as: 1 - Enter the '.' in file extensions

browserSync.init(['./dist/pages/*.html','./dist/css/*.css', './dist/js/*.js']

2 - Specify in gulp.watch what I wanted it to listen to

gulp.watch(['./sass/*scss','./views/*pug'], ['sass', 'pug'])

Now everything is working okay!