0

Помогите найти причину по которой в хроме не обновляются автоматически стили. Сейчас использую связку browser-syn + stylus, (компиляция выполняется). Могу предположить, что проблема как-то связана с препроцессором stylus, поскольку ранее, использовал расширения хрома (livePage,liveReload), когда перешел на stylus, начались чудеса. вот код:

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']);

Кто сталкивался, как решили? Пробовал гуглить, ничего толкового не нашел. PS: У меня windows vista

1 ответ 1

1

У меня так и все работает

На всякий случай мой велосипед, поковыряйте может чего полезного найдете.

'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"]);
});
1
  • благодарю за ответ и велосипед , найду решение, отпишусь :)
    – Bogdan
    25 сен 2015 в 9:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.