Help me find the reason why styles are not automatically updated in chrome. Now I use a browser-syn + stylus combination, (compilation is performed). I can assume that the problem is somehow related to the stylus preprocessor, because earlier, I used chromium extensions ( livePage , liveReload ), when I switched to the stylus , miracles began. Here is the code:

 var gulp = require('gulp'), jade = require('gulp-jade'), stylus = require('gulp-stylus'), plumber = require('gulp-plumber'), browserSync = require('browser-sync').create(), watch = require('gulp-watch'); gulp.task('stylus', function(){ return gulp.src('app/stylus/*.styl') .pipe(plumber()) .pipe(stylus({linenos: true})) .pipe(gulp.dest('build/css')) }); gulp.task('jade', function(){ return gulp.src('app/jade/*.jade') .pipe(plumber()) .pipe(jade({pretty:true})) .pipe(gulp.dest('build/')) }); gulp.task('browser-watch', ['stylus', 'jade'], browserSync.reload); gulp.task('serve', ['stylus', 'jade'], function() { browserSync({ server: { baseDir: "./" } }); gulp.watch('app/stylus/*.styl', ['browser-watch']); gulp.watch('app/jade/*.jade', ['browser-watch']); }); gulp.task('default', ['browser-watch']);

Who faced how decided? I tried to google, I did not find anything sensible. PS: I have windows vista

    1 answer 1

    It works for me

    Just in case my bike , pick it up can find something useful.

     'use strict'; // Π˜Π½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ var gulp = require('gulp'), jade = require('gulp-jade'), stylus = require('gulp-stylus'), autoprefixer = require('gulp-autoprefixer'), imagemin = require('gulp-imagemin'), browserSync = require('browser-sync'), reload = browserSync.reload, cssbeautify = require('gulp-cssbeautify'), gutil = require('gulp-util'), cache = require('gulp-cache'), include = require('gulp-include'), rename = require("gulp-rename"), uglify = require('gulp-uglify'), imageminPngquant = require('imagemin-pngquant'), jadeInheritance = require('gulp-jade-inheritance'), stylusTypeUtils = require('stylus-type-utils'); // Ѐункция ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ошибок var handleError = function(err) { gutil.log(err); gutil.beep(); }; // ΠŸΡƒΡ‚ΠΈ ΠΊ Ρ„Π°ΠΉΠ»Π°ΠΌ var path = { html: { source: ['./source/**/*.jade', '!./source/partials/*.jade', '!./source/blocks/**/*.jade'], watch: 'source/**/*.jade', destination: './public/', basedir: './source' }, css: { source: ['./source/css/*.styl', '!./source/css/lib/**/*.styl', '!./source/**/_*.styl'], watch: 'source/**/*.styl', destination: './public/css/' }, assets: { source: './assets/**/*', watch: 'assets/**/*', destination: './public' }, img: { source: './source/img/**/*.{jpg,jpeg,png,gif,svg}', watch: 'source/img/**/*', destination: './public/img' }, js: { plugins: { source: './source/js/*.js', watch: './source/js/*', destination: './public/js' } } }; // Π›ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ сСрвСр gulp.task('browser-sync', function () { browserSync.init([ '*.html', 'css/*.css', '**/*.{png,jpg,svg}', 'js/*.js', 'fonts/*.{eot,woff,woff2,ttf}' ], { open: true, server: { baseDir: './public' } }); }); // Π‘ΠΎΠ±ΠΈΡ€Π°Π΅ΠΌ Stylus gulp.task('stylus', function() { gulp.src(path.css.source) .pipe(stylus({use: stylusTypeUtils()})) .pipe(autoprefixer({ browsers: ['last 2 version', '> 5%', 'safari 5', 'ie 8', 'ie 7', 'opera 12.1', 'ios 6', 'android 4'], cascade: false })) .pipe(cssbeautify({ indent: ' ', autosemicolon: true })) .on('error', handleError) .pipe(gulp.dest(path.css.destination)) .pipe(reload({stream:true})); }); // Π‘ΠΎΠ±ΠΈΡ€Π°Π΅ΠΌ html ΠΈΠ· Jade gulp.task('jade', function() { gulp.src(path.html.source) .pipe(jadeInheritance({ basedir: path.html.basedir })) .pipe(jade({ pretty: '\t', basedir: path.html.basedir })) .on('error', handleError) .pipe(gulp.dest(path.html.destination)) .pipe(reload({stream:true})); }); // ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌ изобраТСния gulp.task('images', function() { gulp.src(path.img.source) .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true, svgoPlugins: [{removeViewBox: false}], use: [imageminPngquant()] }))) .on('error', handleError) .pipe(gulp.dest(path.img.destination)); }); // ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ Ρ„Π°ΠΉΠ»Ρ‹ gulp.task('copy', function() { gulp.src(path.assets.source) .on('error', handleError) .pipe(gulp.dest(path.assets.destination)) .pipe(reload({stream:true})); }); // Π‘ΠΎΠ±ΠΈΡ€Π°Π΅ΠΌ JS gulp.task('plugins', function() { gulp.src(path.js.plugins.source) .pipe(include()) .pipe(gulp.dest(path.js.plugins.destination)) .pipe(uglify()) .pipe(rename({ suffix: ".min" })) .on('error', handleError) .pipe(gulp.dest(path.js.plugins.destination)) .pipe(reload({stream:true})); }); gulp.task("build", ['stylus', 'jade', 'images', 'plugins', 'copy']); gulp.task("default", ["build", "browser-sync"], function(){ gulp.watch(path.css.watch, ["stylus"]); gulp.watch(path.html.watch, ["jade"]); gulp.watch(path.img.watch, ["images"]); gulp.watch(path.js.plugins.watch, ["plugins"]); gulp.watch(path.assets.watch, ["copy"]); });
    • I thank you for the answer and the вСлосипСд , find a solution, accomplish your goal :) - Odan