Giters

mcfly-io / generator-mcfly

A Yeoman generator for scaffolding an application using angular, browserify, ionic and famous

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scss

ghaiat opened this issue · comments

commented

If you had a new scss file while browsersync is running, you need to kill/restart browsersync if you want it to listen to any additional changes in the new scss file, which is a pain when developping new directives

commented

Also, if you make a mistake in scss, browsersync will fail, evne so there is a error catching in the gulp task. You can talk @EnguYoo about it

commented

Are you just adding it to the folder, or are you doing an @import?

commented

importing it through an import from an index.scss

commented

gulp_tasks/tasks/style.js:51 catching error mechanism just doesn't seem to work.
This code works fin but with gulp-sass 2 : dlmanning/gulp-sass#315

commented

We're on gulp-sass@2.0.4 though... can you check which version you have in your project?

commented

Indeed I switched to gulp-sass 2, was still an old version last time I checked.
But gulp_tasks/tasks/style.js:51 still doesn't work in my projet. Link posted before fixed it for me.

commented

Can you show me what you're using now that works?

commented

I put this on style.js:48 :

var sassFiles = gulp.src(constants.style.sass.src)
        .pipe(sass({
            errLogToConsole: false,
            onError: function(err) {
                gutil.beep();
                gutil.log(gutil.colors.red('Sass failed'));
                gutil.log(gutil.colors.red(err.message));
                gutil.log(gutil.colors.red(err.file + ':' + err.line + ':' + err.column));
            }
        })).on('error', sass.logError)
        .pipe(concat('sass.css'));

Just appended the

.on('error', sass.logError)

But I think we could get rid of all the onError block before.

commented

can you try it with this:

var sassFiles = gulp.src(constants.style.sass.src)
        .pipe(sass({
            errLogToConsole: false
        }))
        .on('error', function sassError (err) {
                gutil.beep();
                gutil.log(gutil.colors.red('Sass failed'));
                gutil.log(gutil.colors.red(err.message));
                gutil.log(gutil.colors.red(err.file + ':' + err.line + ':' + err.column));
        })
        .pipe(concat('sass.css'));

And if that doesn't work, then with this:

var sassFiles = gulp.src(constants.style.sass.src)
        .pipe(sass({
            errLogToConsole: false
        }))
        .on('error', function sassError (err) {
                gutil.beep();
                gutil.log(gutil.colors.red('Sass failed'));
                gutil.log(gutil.colors.red(err.message));
                gutil.log(gutil.colors.red(err.file + ':' + err.line + ':' + err.column));
                this.emit('end');
        }.bind(this))
        .pipe(concat('sass.css'));
commented

The first one doesn't break the "gulp browsersync" command, but then browsersync ignores new changes in my .scss (even after reloading the page).
The second one stop the "gulp browsersync" command with :

/Users/engu/dashboard/gulp_tasks/tasks/style.js:57
            this.emit('end');
                 ^
TypeError: undefined is not a function
    at Function.sassError (/Users/engu/dashboard/gulp_tasks/tasks/style.js:57:18)
    at DestroyableTransform.emit (events.js:129:20)
    at onwriteError (/Users/engu/dashboard/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:250:10)
    at onwrite (/Users/engu/dashboard/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:268:5)
    at WritableState.onwrite (/Users/engu/dashboard/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:106:5)
    at afterTransform (/Users/engu/dashboard/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:104:5)
    at TransformState.afterTransform (/Users/engu/dashboard/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:79:12)
    at errorM (/Users/engu/dashboard/node_modules/gulp-sass/index.js:110:14)
    at Object.callback (/Users/engu/dashboard/node_modules/gulp-sass/index.js:121:18)
    at options.error (/Users/engu/dashboard/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:279:32)
commented

Got it.

And this?

var sassFiles = gulp.src(constants.style.sass.src)
        .pipe(sass({
            errLogToConsole: false
        }) .on('error', function sassError (err) {
                gutil.beep();
                gutil.log(gutil.colors.red('Sass failed'));
                gutil.log(gutil.colors.red(err.message));
                gutil.log(gutil.colors.red(err.file + ':' + err.line + ':' + err.column));
        }))
        .pipe(concat('sass.css'));
commented

Same than the first one (doesn't break but then ignores changes).

commented

Ok so then I expect this may have the desired functionality...

var sassFiles = gulp.src(constants.style.sass.src)
        .pipe(sass({
            errLogToConsole: false
        }).on('error', function sassError (err) {
                gutil.beep();
                gutil.log(gutil.colors.red('Sass failed'));
                gutil.log(gutil.colors.red(err.message));
                gutil.log(gutil.colors.red(err.file + ':' + err.line + ':' + err.column));
                this.emit('end');
        }))
        .pipe(concat('sass.css'));

... but that does basically the same thing as the sass.logError handler from gulp-sass so we might as well use that (since we won't have to maintain it)

Just to confirm, the preferred syntax in the generator will be this?

var sassFiles = gulp.src(constants.style.sass.src)
        .pipe(sass({
            errLogToConsole: false
        }).on('error', sass.logError))
        .pipe(concat('sass.css'));
commented

Still doesn't work as the this.emit('end') causes the command to stop.
The second one works fine for me, looks better and provides all the information needed :

Error in plugin 'sass'
Message:
    client/styles/mail.scss
  28:5  non-terminal statement or declaration must end with ';'

for example.

commented

rewrite the followings:
Modify

var taskStyle = function(constants, done) {
    var dest = constants.dist.distFolder;
    dest = helper.isMobile(constants) ? dest + '/www/' + constants.style.dest : dest + '/' + constants.style.dest;

    var sassFiles = gulp.src(constants.style.sass.src)
        .pipe(sass({
            errLogToConsole: false
        }).on('error', sass.logError))
        .on('error', function(err) {
            gutil.beep();
            gutil.log(gutil.colors.red('Sass failed'));
        })
        .pipe(concat('sass.css'));

    var lessFiles = gulp.src(constants.style.less.src)
        .pipe(less())
        .pipe(concat('less.css'));

    es.concat(lessFiles, sassFiles)
        .pipe(order(['less.css', 'sass.css']))
        .pipe(concat(constants.style.destName))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulpif(constants.mode === 'prod', minifycss()))
        .pipe(gulp.dest(dest))
        .pipe(size({
            title: 'css files',
            showFiles: true
        }))
        .pipe(es.wait(done));
};

Add

gulp.task('style:nofont', function(done) {
    var taskname = 'style:nofont';
    gmux.targets.setClientFolder(constants.clientFolder);
    if (global.options === null) {
        global.options = gmux.targets.askForMultipleTargets(taskname);
    }
    gmux.createAndRunTasks(gulp, taskStyle, taskname, global.options.target, global.options.mode, constants, done);
});

Modify

var taskStyleWatch = function(constants, done) {
    //gulp.watch(constants.style.watchFolder, ['style:nofont']);
    //var watch = require('gulp-watch');
    var bs = require('browser-sync').create();
    bs.watch(constants.style.watchFolder, function() {
        gulp.start('style:nofont', done);
    });

};