weixin_39885683
weixin_39885683
2020-12-31 16:15

Scss

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

该提问来源于开源项目:mcfly-io/generator-mcfly

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

16条回答

  • weixin_39885683 weixin_39885683 4月前

    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 about it

    点赞 评论 复制链接分享
  • weixin_39830200 weixin_39830200 4月前

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

    点赞 评论 复制链接分享
  • weixin_39885683 weixin_39885683 4月前

    importing it through an import from an index.scss

    点赞 评论 复制链接分享
  • weixin_39627481 weixin_39627481 4月前

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

    点赞 评论 复制链接分享
  • weixin_39830200 weixin_39830200 4月前

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

    点赞 评论 复制链接分享
  • weixin_39627481 weixin_39627481 4月前

    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.

    点赞 评论 复制链接分享
  • weixin_39830200 weixin_39830200 4月前

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

    点赞 评论 复制链接分享
  • weixin_39627481 weixin_39627481 4月前

    I put this on style.js:48 :

     js
    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

     js
    .on('error', sass.logError)
    

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

    点赞 评论 复制链接分享
  • weixin_39830200 weixin_39830200 4月前

    can you try it with this:

     js
    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:

     js
    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'));
    
    点赞 评论 复制链接分享
  • weixin_39627481 weixin_39627481 4月前

    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)
    
    点赞 评论 复制链接分享
  • weixin_39830200 weixin_39830200 4月前

    Got it.

    And this?

     js
    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'));
    
    点赞 评论 复制链接分享
  • weixin_39627481 weixin_39627481 4月前

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

    点赞 评论 复制链接分享
  • weixin_39830200 weixin_39830200 4月前

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

     js
    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?

     js
    var sassFiles = gulp.src(constants.style.sass.src)
            .pipe(sass({
                errLogToConsole: false
            }).on('error', sass.logError))
            .pipe(concat('sass.css'));
    
    点赞 评论 复制链接分享
  • weixin_39627481 weixin_39627481 4月前

    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.

    点赞 评论 复制链接分享
  • weixin_39878698 weixin_39878698 4月前

    rewrite the followings: Modify

     js
    
    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

     js
    
    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

     js
    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);
        });
    
    };
    
    点赞 评论 复制链接分享
  • weixin_39878698 weixin_39878698 4月前

    see https://github.com/mcfly-io/generator-sublime/commit/263ab87b1a373c9a40ab8044e91d30c2ea2c5c11

    点赞 评论 复制链接分享

相关推荐