Search code examples
gulpgulp-watchgulp-sass

Gulpfile.js file is not working?


My Gulpfile.js is not working and not even creating css folder and doesn't add file in it automatically when I edit "_globals.scss". This code is also not ding any change when I created change in this file like body color change in "_globals.scss" is also not working and help me how to tun gulp watch using cmd in window

var gulp = require('gulp');
var livereload = require('gulp-livereload')
var uglify = require('gulp-uglifyjs');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');




gulp.task('imagemin', function () {
    return gulp.src('./themes/custom/shinedelhi/images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('./themes/custom/shinedelhi/images'));
});


gulp.task('sass', function () {
  gulp.src('./themes/custom/shinedelhi/sass/**/*.scss')
    .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./themes/custom/shinedelhi/css'));
});


gulp.task('uglify', function() {
  gulp.src('./themes/custom/shinedelhi/lib/*.js')
    .pipe(uglify('main.js'))
    .pipe(gulp.dest('./themes/custom/shinedelhi/js'))
});

gulp.task('watch', function(){
    livereload.listen();

    gulp.watch('./themes/custom/shinedelhi/sass/**/*.scss', ['sass']);
    gulp.watch('./themes/custom/shinedelhi/lib/*.js', ['uglify']);
    gulp.watch(['./themes/custom/shinedelhi/css/style.css', './themes/custom/shinedelhi/**/*.twig', './themes/custom/shinedelhi/js/*.js'], function (files){
        livereload.changed(files)
    });
}); 

Solution

  • You can invoke Gulp from terminal either using just gulp, with searches for a gulpfile.js under your current working directory. Doing so, it searches for a default task and invokes it.

    You can also pass parameters to gulp, and then it searches for tasks with the same name of the parameter, i.e. in your script if you just execute gulp watch in the terminal, it should execute (provided you're executing it in the correct directory and your gulpfile is properly named gulpfile.js) your watch task.

    So, I bet that just gulp watch will set up the gulp watch process for you, and then a gulp command from terminal should setup the scss and uglify watchers.

    This said, you need this in order to just invoke the watcher. That doesn't mean it will work as expected. You must be sure the paths to the .scss and .js files are correct from the folder when you have your gulpfile.js file -which is the same folder from you must use the gulp command in the cmd terminal-.

    (

    In case you want to use your Gulp just with a bare 'gulp' command from terminal, you must set up a 'default' task that invokes another tasks. In your case, it could be like:

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

    )