What would be the best way of combing these two tasks? If it's possible.
I think it would get messy and hard to maintain going this approach, so is there a more intelligent way to run these tasks?
Please see the code for my current two gulp tasks bellow. You should be able to see my input files and desired output folder. The reason that I currently have two separate tasks is because there are other folders/files that I don't want compiling (see includePaths).
// A task that compiles index SCSS to CSS
gulp.task('sass-index', function () {
return gulp.src('resources/scss/index.scss')
.pipe(sass({
precision: 10,
includePaths: [
'resources/scss/variables',
'resources/scss/mixins'
]
}))
.pipe(autoprefixer({
browsers: [
'> 1%',
'last 2 Chrome major versions',
'last 2 Firefox major versions',
'last 2 Edge major versions',
'last 2 Safari major versions',
'ie 11',
'last 3 Android major versions',
'last 3 ChromeAndroid major versions',
'last 2 iOS major versions'
]
}))
.pipe(uglifycss())
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
// A task that compiles template SCSS to CSS
gulp.task('sass-templates', function () {
return gulp.src('resources/scss/templates/*.scss')
.pipe(sass({
precision: 10,
includePaths: [
'resources/scss/variables',
'resources/scss/mixins'
]
}))
.pipe(autoprefixer({
browsers: [
'> 1%',
'last 2 Chrome major versions',
'last 2 Firefox major versions',
'last 2 Edge major versions',
'last 2 Safari major versions',
'ie 11',
'last 3 Android major versions',
'last 3 ChromeAndroid major versions',
'last 2 iOS major versions'
]
}))
.pipe(uglifycss())
.pipe(gulp.dest('assets/css/templates'))
.pipe(browserSync.stream());
});
Try with this code:
const gulpSrc = "resources/scss/",
gulpDest = "assets/css/",
filePaths = [
[
gulpSrc + "index.scss",
gulpDest
],
[
gulpSrc + "templates/*.scss",
gulpDest, gulpDest + "/templates"
]
]
;
gulp.task('sass', function (done) {
filePaths.map(function (file) {
return gulp.src(file[0])
.pipe(sass({
precision: 10,
includePaths: [
'resources/scss/variables',
'resources/scss/mixins'
]
}))
.pipe(autoprefixer({
browsers: [
'> 1%',
'last 2 Chrome major versions',
'last 2 Firefox major versions',
'last 2 Edge major versions',
'last 2 Safari major versions',
'ie 11',
'last 3 Android major versions',
'last 3 ChromeAndroid major versions',
'last 2 iOS major versions'
]
}))
.pipe(uglifycss())
.pipe(gulp.dest(file[1]))
.pipe(browserSync.stream());
});
done();
});