gulp (scss) fix

This commit is contained in:
Jan Jastrow 2020-05-28 11:23:33 +02:00
parent 7d56533ed0
commit 329c563a41
4 changed files with 63 additions and 34 deletions

View File

@ -1,5 +1,11 @@
# Changelog
## 3.0.3 (2020-05-28)
- Fixed gulp script (cssnano)
- Seperated scss tasks
- minor structure update
## 3.0.2 (2020-05-04)
- Updated npm dependencies

View File

@ -1,7 +1,8 @@
'use strict'
'use strict';
//----------------
//------------------------
//:: Initiate npm-modules
const gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
@ -15,8 +16,10 @@ const gulp = require('gulp'),
merge2 = require('merge2'),
rimraf = require('rimraf');
//----------------
//:: configs
//------------------------
//:: Config parameter
var Config = {
inputDir: '_source/',
outputDir: '_dist/'
@ -30,22 +33,18 @@ var SassConfig = {
}
}
var postcss_plugins = [
cssnano,
autoprefixer
];
//----------------
//------------------------
//:: Tasks
// compile scss
function scss() {
function scss_addons() {
var onError = function(err) {
notify.onError({
title: 'gulp',
subtitle: 'Error!',
message: '❌ <%= error.message %>',
sound: 'Submarine'
title: 'scss_addons',
subtitle: 'Error!',
message: '❌ <%= error.message %>',
sound: 'Submarine'
})(err);
this.emit('end');
};
@ -55,22 +54,44 @@ function scss() {
'node_modules/sanitize.css/sanitize.css'
]))
.pipe(concat('addons.css'))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(postcss(postcss_plugins))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir)),
gulp.src(SassConfig.inputDir + '*.scss')
.pipe(concat('styles.css'))
.pipe(plumber({errorHandler: onError}))
.pipe(postcss(postcss_plugins))
.pipe(sass(SassConfig.options).on('error', sass.logError))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(postcss([cssnano()]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(livereload())
.pipe(notify({
title: 'gulp',
title: 'scss_addons',
subtitle: 'Success!',
message: '✅ SCSS compiled',
timeout: '2'
}));
}
function scss_main() {
var onError = function(err) {
notify.onError({
title: 'scss_main',
subtitle: 'Error!',
message: '❌ <%= error.message %>',
sound: 'Submarine'
})(err);
this.emit('end');
};
return gulp
.src(SassConfig.inputDir + '*.scss')
.pipe(concat('styles.css'))
.pipe(plumber({errorHandler: onError}))
.pipe(sass(SassConfig.options).on('error', sass.logError))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(postcss([cssnano()]))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(SassConfig.outputDir))
.pipe(livereload())
.pipe(notify({
title: 'scss_main',
subtitle: 'Success!',
message: '✅ SCSS compiled',
timeout: '2'
@ -79,16 +100,16 @@ function scss() {
// Copy those other files
function copy(done) {
gulp.src([Config.inputDir + '*.*'])
gulp.src([Config.inputDir + '**/*.*'])
.pipe(gulp.dest(Config.outputDir))
.pipe(livereload())
done();
};
// watch for changes
// Watch for changes
function watch() {
livereload.listen();
gulp.watch(SassConfig.inputDir + '*.scss', scss);
gulp.watch(SassConfig.inputDir + '*.scss', scss_main);
gulp.watch(Config.inputDir + '*.html', copy);
};
@ -97,14 +118,16 @@ function cleanup(cb) {
return rimraf(Config.outputDir + '*', cb)
};
//----------------
//:: Export tasks
//------------------------
//:: Define tasks
// complex tasks
const build = gulp.series(cleanup, gulp.parallel(copy, scss));
const build = gulp.series(cleanup, gulp.parallel(copy, scss_addons, scss_main));
// export tasks
exports.scss = scss;
exports.scss_main = scss_main;
exports.scss_addons = scss_addons;
exports.copy = copy;
exports.watch = watch;
exports.cleanup = cleanup;

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "website_template",
"version": "3.0.2",
"version": "3.0.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,7 +1,7 @@
{
"name": "website_template",
"description": "npm & gulp development template",
"version": "3.0.2",
"version": "3.0.3",
"author": "Jan Jastrow",
"license": "MIT",
"homepage": "https://jan.jastrow.me",