Мои часы gulp не работают для css. У меня такой конфиг:

var config = {
    port : 9007,
    devBaseUrl : "http://localhost",
    paths : {
        html : "./src/*.html",
        js : "./src/**/*.js",
        images : './src/images/*',
        css : [
          'node_modules/bootstrap/dist/css/bootstrap.min.css',
          'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
          'node_modules/toastr/package/toastr.css',
            "src/css/main.css"

        ],
        dist : './dist',
        mainJS : './src/main.js'
    }
};

Моя задача gulp css:

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
});

И моя задача по наблюдению:

gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
    gulp.watch(config.paths.css, ['css']);
});

Остальное работает без проблем. Наверное, это что-то маленькое, чего я не вижу.

РЕДАКТИРОВАТЬ

Structure

Я также попытался изменить пути к:

'./node_modules/bootstrap/dist/css/bootstrap.min.css',
'./node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'./node_modules/toastr/package/toastr.css',
'./src/css/*.css'

И задача подключения:

gulp.task('connect', function(){
    connect.server({
        root : ['dist'],
        port : config.port,
        base : config.devBaseUrl,
        livereload : true
    })
});
0
Boky 30 Апр 2016 в 11:26

2 ответа

Лучший ответ

Я решил это. Я только изменил задачу css на:

gulp.task('css', function() {
    gulp.src(config.paths.css)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'));
        .pipe(connect.reload());
});

И это сработало как шарм.

0
Boky 5 Май 2016 в 09:10

В вашей конфигурации измените "src / css / main.css" на "./src/css/main.css".

Также вместо того, чтобы компилировать следующее по-своему,

'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'node_modules/toastr/package/toastr.css',

Вы можете просто использовать gulp-useref и сделать это так

// inside your index.html
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
   <!-- endbuild -->
</head>
0
user6281488user6281488 2 Май 2016 в 16:32