Вот мой gulp код, в данный момент отрабатывает main.scss файл в main.css.
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create(),
sassPath = ('./src/style/scss/main.scss'),
cssPath = ('./public/style/css'),
jsPath = ('./public/js/main.js'),
gulp.task('styles', function () {
gulp.src(sassPath)
.pipe(sass())
.pipe(gulp.dest(cssPath))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task('serve', function () {
browserSync.init({
server: {
baseDir: './public'
}
});
gulp.watch('./src/style/scss/*.scss', ['styles']);
gulp.watch('./public/**/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['styles','serve']);
и я включаю в проект только main.css.
Теперь я хочу подключить media.css.
Но не могу чтобы туда конвертовался media.scss.
Я сделал следующее:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create(),
sassPath = ('./src/style/scss/main.scss'),
cssPath = ('./public/style/css'),
jsPath = ('./public/js/main.js'),
mediaSassPath = ('./src/style/scss/_media.scss'),
mediaCssPath = ('./public/style/css/media.css');
gulp.task('styles', function () {
gulp.src(sassPath)
.pipe(sass())
.pipe(gulp.dest(cssPath))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task('styles2', function () {
gulp.src(mediaSassPath)
.pipe(sass())
.pipe(gulp.dest(mediaCssPath))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task('serve', function () {
browserSync.init({
server: {
baseDir: './public'
}
});
gulp.watch('./src/style/scss/*.scss', ['styles']);
gulp.watch('./src/style/scss/media.scss', ['styles2']);
gulp.watch('./public/**/*.html').on('change', browserSync.reload);
});
gulp.task('default', ['styles','styles2', 'serve']);
Но не работает.
Как это реализовать?