@WebforSelf

Как с помощью gulp собрать scss?

Есть такой шаблон - ссылка
Получается продали в таком формате, есть набор 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 и уже собирать.
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 1
inkShio
@inkShio
Попробуй в консоли gulp набрать, должен запустить сервер, собрать sass и начать отслеживать изменения.
Но учти, что тут походу старый gulp используется, и если у тебя новый node.js то будет ошибка. Придется обновить gulp и чуток таски поправить.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы