Мои часы 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']);
});
Остальное работает без проблем. Наверное, это что-то маленькое, чего я не вижу.
РЕДАКТИРОВАТЬ
Я также попытался изменить пути к:
'./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
Похожие вопросы
Связанные вопросы
Новые вопросы
gulp
Gulp - это система сборки JavaScript, основанная на Node.js, такая как Grunt. Gulp использует потоки и конфигурацию кода для более простого и интуитивно понятного процесса сборки.