estoy intentando que compilen los archivos sass en un archivo principal que contiene todos los @import pero no logro hacer que funcione. Mi código es:
gulpfile.js:
//Cargar módulos
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
notify = require("gulp-notify"),
browserSync = require('browser-sync').create(),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
//sassImport = require('gulp-sass-import'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
imagemin = require('gulp-imagemin'),
connect = require('gulp-connect-php');
//browsersync sass
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "localhost"
});
});
//browsersync php
gulp.task('connect', function() {
connect.server({}, function() {
browserSync({
proxy: 'localhost'
});
});
});
//estilos css
gulp.task('sass', function(done) {
return gulp.src('./src/scss/*.scss')
.pipe(sourcemaps.init())
/*.pipe(sassImport({
filename : '_file',
marker : '/*'
}))*/
.pipe(sass.sync()).on('error', notify.onError(function(error) {
return 'Error al compilar sass.\n Detalles en la consola.\n' +
error;
}))
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 3 versions'],
cascade: false
}))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest("./dist/css/"))
.pipe(notify({
title: "SASS",
message: "OK: Archivo compilado"
}))
.pipe(browserSync.stream());
});
//Procesar scripts
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
//Minificar imágenes
gulp.task('image', function() {
return gulp.src('./src/images/**/*')
.pipe(imagemin({
interlaced: true,
progressive: true,
optimizationLevel: 5,
svgoPlugins: [{
removeViewBox: true
}]
}))
.pipe(gulp.dest('./dist/images/'));
});
//Tarea por default
gulp.task('watch', function() {
gulp.watch('./src/scss/*.scss', ['sass']); //Vigila cambios en los
estilos
gulp.watch("./*.php").on("change", browserSync.reload);
gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/images/**/*', ['image']);
//gulp.watch('**/*.php').on('change', function () {
// browserSync.reload();
//});
});
//Default task
gulp.task('default', ['serve', 'sass', 'scripts', 'image', 'connect',
'watch'
]);
main.scss(el que importa los archivos sass):
// BASE
@import 'base/_reset.scss';
@import 'base/_typography.scss';
//VENDORS (librerías externas)
@import 'vendors/_fontawesome.scss';
//UTILIDADES (variables, funciones, mixins,...)
@import 'utils/_variables.scss';
@import 'utils/_functions.scss';
@import 'utils/_mixins.scss';
//@import 'utils/_helpers.scss';
//COMPONENTES (botones, tablas, carrusel,..)
@import 'components/_buttons.scss';
//@import 'components/_dropdown.scss';
//@import 'components/_tables.scss';
//LAYOUT (elementos estructurales)
@import 'layout/_header.scss';
@import 'layout/_footer.scss';
//@import 'layout/_navigation.scss';
//@import 'layout/_sidebar.scss';
@import 'layout/_forms.scss';
@import 'layout/_grid.scss';
//PAGES (estilos específicos para algunas páginas: home, contacto,...)
//@import 'pages/_home.scss';
//@import 'pages/_contact.scss';
//TEMAS (si se utilizan... por defecto, administrador,..)
//@import 'themes/_theme.scss';
//@import 'themes/_admin.scss';