0

I'm using underscore with sass to create a theme, and I'm using gulp as task runner.

The problem is that after wtaching nothing happens. I tried to perform a single task but once more time nothing. To be sure I performed js task javascript too

here the code:

 var themename = 'mytheme';

    var gulp = require('gulp'),
        // Prepare and optimize code etc
        autoprefixer = require('autoprefixer'),
        browserSync = require('browser-sync').create(),
        image = require('gulp-image'),
        jshint = require('gulp-jshint'),
        postcss = require('gulp-postcss'),
        sass = require('gulp-sass'),
        sourcemaps = require('gulp-sourcemaps'),

        // Only work with new or updated files
        newer = require('gulp-newer'),

        // Name of working theme folder
        root = '../' + themename + '/',
        scss = root + 'sass/',
        js = root + 'js/',
        img = root + 'images/',
        languages = root + 'languages/';


    // CSS via Sass and Autoprefixer
    gulp.task('css', function() {
        return gulp.src(scss + '{style.scss,rtl.scss}')
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'expanded', 
            indentType: 'tab',
            indentWidth: '1'
        }).on('error', sass.logError))
        .pipe(postcss([
            autoprefixer('last 2 versions', '> 1%')
        ]))
        .pipe(sourcemaps.write(scss + 'maps'))
        .pipe(gulp.dest(root));
    });

    // Optimize images through gulp-image
    gulp.task('images', function() {
        return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
        .pipe(newer(img))
        .pipe(image())
        .pipe(gulp.dest(img));
    });

    // JavaScript
    gulp.task('javascript', function() {
        return gulp.src([js + '*.js'])
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(gulp.dest(js));
    });


    // Watch everything
    gulp.task('watch', function() {
        browserSync.init({ 
            open: 'external',
            proxy: 'localhost/mysite',
            port: 8080
        });
        gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
        gulp.watch(js + '**/*.js', ['javascript']);
        gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
        gulp.watch(root + '**/*').on('change', browserSync.reload);
    });


    // Default task (runs at initiation: gulp --verbose)
    gulp.task('default', ['watch']);
Salvio
  • 100
  • 2
  • 15
  • You have different `watch` paths and `src` paths, eg. `[root + '**/*.css', root + '**/*.scss' ]` and `scss + '{style.scss,rtl.scss}'`. Is there a reason for that? – lofihelsinki May 02 '17 at 13:39
  • In the watch I use basepath of the theme root and watch for every directory ** and for every file *.scss In the task I point directlty the stylce.scss file... – Salvio May 02 '17 at 15:07
  • Strange I changed root variable adding "../../" in place of "../" and it looks it works, but it's very slow... Can anyone explain me why? It's correct the only "../"? – Salvio May 02 '17 at 16:22
  • The subfolder scannings in `watch` tasks can make it slower. Try to remove some `**/` watchers and replacing them with more accurate folder definitions. – lofihelsinki May 02 '17 at 16:31
  • Now I have another issue: watch runs a task and never stopping reloading the browser on and on... – Salvio May 02 '17 at 16:37
  • OK the problem is it watches for css and when it changes teh loop starts and never ending... – Salvio May 02 '17 at 17:45

0 Answers0