Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2018, 16:10
Новичок на форуме
Отправить личное сообщение для Ermac1988 Посмотреть профиль Найти все сообщения от Ermac1988
 
Регистрация: 09.07.2017
Сообщений: 2

Нужна помощь со сборкой scss (модуль gulp-sass)
Есть в принципе работающий 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']);
Изображения:
Тип файла: jpg апвсвцскпк.jpg (3.7 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2018, 06:55
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

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}));
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Gulp, проблема при компиляции sass malgeorge Сборка проекта, утилиты 2 24.02.2017 11:43
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 23:33
Нужна помощь: Slider wheel Alex555 Мобильный JavaScript 0 15.05.2013 18:06
Нужна помощь по слайдеру seoguru Работа 3 28.01.2013 22:02
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17