Есть такой шаблон -
ссылка
Получается продали в таком формате, есть набор scss файлов и на выходе обычный css собранный из них.
Есть файл gulpfile.js
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
bs = require('browser-sync'),
svgstore = require('gulp-svgstore'),
svgmin = require('gulp-svgmin'),
rename = require('gulp-rename'),
inject = require('gulp-inject'),
watch = require('gulp-watch'),
path = 'design/furniture_v1/';
gulp.task('sprite', function () {
var iconPath = path + 'images/icon/',
svgs = gulp
.src(iconPath + 'sprite/*.svg')
.pipe(svgmin())
.pipe(rename({prefix: 'icon-'}))
.pipe(svgstore({
inlineSvg: true
}));
function fileContents (filePath, file) {
return file.contents.toString();
}
return gulp
.src(iconPath + '_svg.tpl')
.pipe(inject(svgs, {
transform: fileContents
}))
.pipe(gulp.dest(path+'html'));
});
/*задача для эмуляции сервера*/
gulp.task('bs', function(){
bs({
proxy: 'furniture-shop.loc',
port: 433,
notify: false
});
});
/*задача для компиляции css*/
gulp.task('sass', function(){
return gulp.src(path+'scss/**/*.scss')
.pipe(sourcemaps.init()) // нициализируем sourcemaps
.pipe(sass({
outputStyle: 'compressed' // минифицируем компилируемый css
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['> 5%', 'last 2 versions', 'ie >= 10'] // добавляем вендорные префиксы
}))
.pipe(sourcemaps.write('.')) //сохраняем sourcemap файлы в ту же директорию, что и css
.pipe(gulp.dest(path+'css/'))
.pipe(bs.reload({stream: true}));
});
/*Задача на отслеживание изменений*/
gulp.task('watch', ['sass', 'bs'], function(){
gulp.watch(path+'scss/**/*.scss', ['sass']);
gulp.watch(path+'js/**/*.js').on('change', bs.reload);
gulp.watch(path+'html/*.tpl').on('change', bs.reload);
gulp.watch(path+'lang/*.php').on('change', bs.reload);
gulp.watch('../compiled/**/*.php').on('change', bs.reload);
});
gulp.task('default', ['bs', 'sass', 'watch']);
Вопрос, как запустить этот gulp чтоб он собрал все scss воедино? мне предлагают редактировать исходник в css, но я хотел бы редактировать код в scss и уже собирать.
Простой
Средний
