Нужна помощь со сборкой scss (модуль gulp-sass)
Вложений: 1
Есть в принципе работающий gulpfile,но по какой-то причине не собирает scss так как мне нужно, а именно сначала все scss собираются один файл, а потом уже в css.
Во вложении структура scss. Код: 'use strict'; var gulp = require('gulp'), watch = require('gulp-watch'), autoprefixer = require('gulp-autoprefixer'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'), cleanCSS = require('gulp-clean-css'), imagemin = require('gulp-imagemin'), browserSync = require('browser-sync'), reload = browserSync.reload; //concatCSS = require('gulp-concat-css'), //rename = require('gulp-rename'), //notify = require('gulp-notify'), //livereload = require('gulp-livereload'), //connect = require('gulp-connect'); var path = { dist: { html: 'dist/', css: 'dist/css/', js: 'dist/js/', img: 'dist/img/', fonts: 'dist/fonts/', }, app: { html: 'app/*.html', style: 'app/scss/*.scss', js: 'app/js/app.js', img: 'app/img/**/*.*', fonts: 'app/fonts/**/*.*', }, watch: { html: 'app/**/*.html', style: 'app/scss/**/**/*.scss', js: 'app/js/**/*.js', img: 'app/img/**/*.*', fonts: 'app/fonts/**/*.*', } }; var config = { server: { baseDir: './dist' }, tunnel: true, host: 'localhost', port: 9000, logPrefix: 'webmaster-cube' }; gulp.task('webserver', function () { browserSync(config); }); gulp.task('html:dist', function () { return gulp.src(path.app.html) .pipe(gulp.dest(path.dist.html)).pipe(reload({stream: true})); }); gulp.task('js:dist', function () { return gulp.src(path.app.js) .pipe(sourcemaps.init()).pipe(uglify()).pipe(sourcemaps.write()).pipe(gulp.dest(path.dist.js)).pipe(reload({stream: true})); }); gulp.task('style:dist', function () { return gulp.src(path.app.style) .pipe(sass()).pipe(sourcemaps.init()).pipe(sass().on('error', sass.logError)).pipe(sourcemaps.write()).pipe(cleanCSS()).pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false, grid: true})).pipe(gulp.dest(path.dist.css)).pipe(reload({stream: true})); }); gulp.task('image:dist', function () { return gulp.src(path.app.img) .pipe(imagemin({progressive: true, svgoPlugins: [{removeViewBox: false}], optimizationLevel: 5, interlaced: true})).pipe(gulp.dest(path.dist.img)).pipe(reload({stream: true})); }); gulp.task('fonts:dist', function () { return gulp.src(path.app.fonts) .pipe(gulp.dest(path.dist.fonts)); }); gulp.task('dist', [ 'html:dist', 'js:dist', 'style:dist', 'fonts:dist', 'image:dist' ] ); gulp.task('watch', function(){ watch([path.watch.html], function (event, cb) { gulp.start('html:dist'); }); watch([path.watch.style], function (event, cb) { gulp.start('style:dist'); }); watch([path.watch.js], function (event, cb) { gulp.start('js:dist'); }); watch([path.watch.img], function (event, cb) { gulp.start('image:dist'); }); watch([path.watch.fonts], function (event, cb) { gulp.start('fonts:dist'); }); }); gulp.task('default', ['dist', 'webserver', 'watch']); |
https://www.npmjs.com/package/gulp-sass#source-maps
gulp.task('style:dist', function () { return gulp.src(path.app.style) .pipe(sourcemaps.init()).pipe(sass().on('error', sass.logError)).pipe(sourcemaps.write()).pipe(cleanCSS()).pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false, grid: true})).pipe(gulp.dest(path.dist.css)).pipe(reload({stream: true})); }); |
Часовой пояс GMT +3, время: 16:36. |