Rendering 2 scss and output them via Gulp? - sass

Question

I'm new to Gulp,
this Gulp setting is already rendered 'main.scss' but I want to add 1 more scss file named 'styles.scss' into this Gulp but kinda stuck.
How can I insert this new scss ?
should I create a new task for new scss? well, I did but it seems that I'm doing it the wrong way.
how to add it in the correct way?
<pre><code>
"use strict";
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
maps = require('gulp-sourcemaps'),
del = require('del'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
htmlreplace = require('gulp-html-replace'),
cssmin = require('gulp-cssmin');
gulp.task("concatScripts", function() {
return gulp.src([
'assets/js/vendor/jquery-3.2.1.slim.min.js',
'assets/js/vendor/popper.min.js',
'assets/js/vendor/bootstrap.min.js',
'assets/js/functions.js'
])
.pipe(maps.init())
.pipe(concat('main.js'))
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task("minifyScripts", ["concatScripts"], function() {
return gulp.src("assets/js/main.js")
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('dist/assets/js'));
});
gulp.task('compileSass', function() {
return gulp.src("assets/css/main.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
return gulp.src("assets/css/main.css")
.pipe(cssmin())
.pipe(rename('main.min.css'))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('watchFiles', function() {
gulp.watch('assets/css/**/*.scss', ['compileSass']);
gulp.watch('assets/js/*.js', ['concatScripts']);
})
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('clean', function() {
del(['dist', 'assets/css/main.css*', 'assets/js/main*.js*']);
});
gulp.task('renameSources', function() {
return gulp.src(['*.html', '*.php'])
.pipe(htmlreplace({
'js': 'assets/js/main.min.js',
'css': 'assets/css/main.min.css'
}))
.pipe(gulp.dest('dist/'));
});
gulp.task("build", ['minifyScripts', 'minifyCss'], function() {
return gulp.src(['*.html', '*.php', 'favicon.ico',
"assets/img/**", "assets/fonts/**"], { base: './'})
.pipe(gulp.dest('dist'));
});
gulp.task('serve', ['watchFiles'], function(){
browserSync.init({
server: "./"
});
gulp.watch("assets/css/**/*.scss", ['watchFiles']);
gulp.watch(['*.html', '*.php']).on('change', browserSync.reload);
});
gulp.task("default", ["clean", 'build'], function() {
gulp.start('renameSources');
});
</code></pre>
Any help really appreciated. Thanks

Answer 1

Assuming styles.scss is in the same folder as main.scss:
gulp.task('compileSass', function() {
// src changed so that all .scss files in folder are used
return gulp.src("assets/css/*.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
// same as above : gulp.src takes a glob of all .css files in css folder
return gulp.src("assets/css/*.css")
.pipe(cssmin())
// name each file with the suffix, rest of name will be same as before
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('clean', function() {
// changed css item so all .css files are deleted
del(['dist', 'assets/css/*.css*', 'assets/js/main*.js*']);
});