I'm working on an upgrade to our SASS. I'm using a main "sass" sheet that imports everything else. When I modify an imported file it doesn't compile it. It doesn't even seem to read the #imported files. When I modify the main sheet it compiles just fine.
Gulp Version: 4.0.2
SASS Version: 4.1.0
My gulp file:
const gulp = require('gulp')
const sass = require('gulp-sass')
const clean = require('gulp-clean-css')
const rename = require('gulp-rename')
const concat = require('gulp-concat')
const uglify = require('gulp-uglify')
const prefixer = require('gulp-autoprefixer')
const sourcemaps = require('gulp-sourcemaps');
var sassSourcesMain = '../scss/source-main.scss';
function style() {
return (
gulp
.src(sassSourcesMain)
.pipe(sourcemaps.init())
.pipe(sass())
.on('error', sass.logError)
.pipe(prefixer())
.pipe(clean())
.pipe(rename('main.min.css'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('../min'))
);
}
function watch(){
gulp.watch(sassSourcesMain, style)
}
exports.watch = watch
exports.style = style;
exports.default = watch;
My main style sheet where everything is getting imported from:
#charset "UTF-8";
#import "base/colors";
#import "base/variables";
#import "base/animations";
#import "base/resets";
#import "base/type";
#import "base/homepagebanners";
And so forth.
I needed to add the sub folders into my watch function:
function watch() {
gulp.watch(paths.styles.src, style);
gulp.watch(subscssfiles, style);
}
Below is my gulpfile. I am trying to generate minified css from scss and then rename it using gulp-rev. Running gulp clean:assets then gulp scss then gulp css works perfectly. But running gulp build does not do the task. The minified css gets stored in ./assets/css but the renamed css is not getting stored in ./public/assets
const gulp = require('gulp');
//gulp sass converts sass to css
const sass = require('gulp-sass');
//cssnano converts css to minified form
const cssnano = require('gulp-cssnano');
//rev renames the assets by appending content hash to filenames so that the browser treats it as a new asset if content is changed
const rev = require('gulp-rev');
const path = require('path');
const del = require('del');
gulp.task('clean:assets', function(done){
del.sync('./public/assets');
del.sync('./assets/css');
done();
});
gulp.task('scss', function(done){
gulp.src('./assets/scss/**/*.scss')
.pipe(sass())
.pipe(cssnano())
.pipe(gulp.dest('./assets/css'))
done();
});
gulp.task('css', function(done){
gulp.src('./assets/css/**/*.css', {base: path.join(process.cwd(), 'assets')})
.pipe(rev())
.pipe(gulp.dest('./public/assets/'))
.pipe(rev.manifest('public/assets/rev-manifest.json',{
base: process.cwd()+'./public/assets',
merge: true
}))
.pipe(gulp.dest('./public/assets'));
done();
});
gulp.task('build', gulp.series('clean:assets', 'scss', 'css'), function(done){
done();
})
gulp.task('scss', ()=> {
return new Promise((resolve, reject) => {
return gulp.src('./assets/scss/**/*.scss')
.pipe(sass())
.pipe(cssnano())
.pipe(gulp.dest('./assets/css'))
.on('end', resolve)
.on('error', reject);
});
});
Changed the scss task to above to get it working. Refer to https://stackoverflow.com/a/53937286/7374508
I have this gulpfile.js to compile css but I also want to minify my css. I try to run many different codes that I found in the internet but none of them works. Could any one help me? Thanks
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', gulp.series(function() {
return gulp.src(['scss/*.scss'])
.pipe(sass()) // converter o Sass em CSS
.pipe(gulp.dest('css'));
}));
gulp.task('watch', gulp.series(function() {
gulp.watch(['scss/*.scss'], gulp.parallel(['sass']));
}));
gulp.task('default', gulp.series(['sass', 'watch']));
Try This
i am sharing two function one for css and and another for sass
run this command
npm install gulp-concat gulp-autoprefixer gulp-sass gulp-sass-glob node-sass --save-dev
// and copy this code and set the
const { src, dest } = require("gulp");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const sass = require("gulp-sass");
const sassGlob = require("gulp-sass-glob");
sass.compiler = require("node-sass");
function css() {
return src("src/css/*.css")
.pipe(concat("style.css"))
.pipe(sassGlob())
.pipe(
sass({
outputStyle: "compressed" //expand or compact or compressed
}).on("error", sass.logError)
)
.pipe(
autoprefixer({
cascade: true
})
)
.pipe(dest("build/css/"));
}
function scss() {
return src('src/scss/style.scss') // import your all file in style.scss
.pipe(sassGlob())
.pipe(
sass({
outputStyle: 'compressed' // you can set "expand or compact or compressed" view
})
.on('error', sass.logError)
).pipe(
autoprefixer({
cascade: true
})
).pipe(dest('build/scss/'));
}
exports.css = css;
exports.scss= scss;
To fix your code try:
gulp.task('sass', function() {
return gulp.src(['scss/*.scss'])
.pipe(sass()) // converter o Sass em CSS
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
gulp.watch(['scss/*.scss'], gulp.series('sass'));
});
gulp.task('default', gulp.series('sass', 'watch'));
But this form of functions is better:
// renamed since your plugin name is apparently `sass` as well
function sass2css() {
return gulp.src(['scss/*.scss'])
.pipe(sass()) // converter o Sass em CSS
.pipe(gulp.dest('css'));
};
function watch() {
gulp.watch(['scss/*.scss'], gulp.series(sass2css));
});
gulp.task('default', gulp.series(sass2css, watch));
Here is my gulp file it compiles and minifies css and js
(it also has some data for images and php files but they are unused)
var gulp = require('gulp'),
gutil = require('gulp-util'),
touch = require('gulp-touch-cmd'),
plugin = require('gulp-load-plugins')(),
merge = require('merge-stream');
// Select Foundation components, remove components project will not use
const SOURCE = {
scripts: [
// Place custom JS here, files will be concantonated, minified if ran with --production
'assets/scripts/**/*.js',
],
// Scss files will be concantonated, minified if ran with --production
styles: 'assets/style/scss/**/*.scss',
// Images placed here will be optimized
images: 'assets/images/src/**/*',
php: '**/*.php'
};
const ASSETS = {
styles: 'assets/style/',
stylesDist: 'assets/dist/style',
scripts: 'assets/scripts/',
scriptsDist: 'assets/dist/scripts',
images: 'assets/images/',
all: 'assets/dist/'
};
gulp.task('log', function() {
console.log(ASSETS.styles);
});
// Compile Sass, Autoprefix and minify
gulp.task('styles', function () {
var bulk = gulp.src(SOURCE.styles);
return merge(bulk)
.pipe(plugin.plumber(function (error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(plugin.sourcemaps.init())
.pipe(plugin.sass())
.pipe(plugin.autoprefixer({
browsers: [
'last 2 versions',
'ie >= 9',
'ios >= 7'
],
cascade: false
}))
.pipe(plugin.cssnano({ safe: true, minifyFontValues: { removeQuotes: false } }))
.pipe(plugin.sourcemaps.write('.'))
.pipe(gulp.dest(ASSETS.stylesDist))
.pipe(touch());
});
// GULP FUNCTIONS
// JSHint, concat, and minify JavaScript
gulp.task('scripts', function () {
// Use a custom filter so we only lint custom JS
return gulp.src(SOURCE.scripts)
.pipe(plugin.plumber(function (error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(plugin.sourcemaps.init())
.pipe(plugin.babel({
presets: ['es2015'],
compact: true,
ignore: ['what-input.js']
}))
.pipe(plugin.concat('scripts.js'))
.pipe(plugin.uglify())
.pipe(plugin.sourcemaps.write('.')) // Creates sourcemap for minified JS
.pipe(gulp.dest(ASSETS.scriptsDist))
.pipe(touch());
});
// Watch files for changes (without Browser-Sync)
gulp.task('watch', function () {
// Watch .scss files
gulp.watch(SOURCE.styles, gulp.parallel('styles'));
// Watch scripts files
gulp.watch(SOURCE.scripts, gulp.parallel('scripts'));
});
Here is another one i've used
// Initialize modules
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp');
// Importing all the Gulp-related packages we want to use
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
var replace = require('gulp-replace');
// File paths
const files = {
scssPath: 'site/templates/styles/sass/**/*.scss',
jsPath: 'site/templates/scripts/**/*.js'
}
// Sass task: compiles the style.scss file into style.css
function scssTask(){
return src(files.scssPath)
.pipe(sourcemaps.init()) // initialize sourcemaps first
.pipe(sass()) // compile SCSS to CSS
.pipe(postcss([ autoprefixer(), cssnano() ])) // PostCSS plugins
.pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
.pipe(dest('site/templates/dist')
); // put final CSS in site/templates/dist folder
}
// JS task: concatenates and uglifies JS files to script.js
function jsTask(){
return src([
files.jsPath
//,'!' + 'includes/js/jquery.min.js', // to exclude any specific files
])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(dest('site/templates/dist')
);
}
// Cachebust
var cbString = new Date().getTime();
function cacheBustTask(){
return src(['index.html'])
.pipe(replace(/cb=\d+/g, 'cb=' + cbString))
.pipe(dest('.'));
}
// Watch task: watch SCSS and JS files for changes
// If any change, run scss and js tasks simultaneously
function watchTask(){
watch([files.scssPath, files.jsPath],
series(
parallel(scssTask, jsTask)
)
);
}
// Export the default Gulp task so it can be run
// Runs the scss and js tasks simultaneously
// then runs cacheBust, then watch task
exports.default = series(
parallel(scssTask, jsTask),
watchTask
);
Everything is working correctly except autoprefixer. BrowserSync is reloading, in devTools lines are showen from sass files, but when I try to apply some flexbox, in my destination file main.css unfortunately there is no effect with autoprefixer. Could you please help me with that?
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
// compile scss into css
function style() {
// 1. where is my scss file
return gulp.src('./scss/**/*.scss')
// 2. pass that file through sass compiler & error log
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(autoprefixer({browsers: ['last 2 version'], cascade: false})
// 3. where do I save the compiled CSS?
.pipe(gulp.dest('./css'))
// 4. stream changes to all browser
.pipe(browserSync.stream()))
}
function watch() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('./scss/**/*.scss', style);
gulp.watch('./*.html').on('change', browserSync.reload);
gulp.watch('./js/*.js').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
dont know why but i can't concat my css file with gulp:
const gulp = require('gulp');
const concatCss = require('gulp-concat');
gulp.task('concat', () => {
return gulp.src('assets/css/*.css')
.pipe(concatCss("bundle.css"))
.pipe(gulp.dest('bundle'))
})
when i run 'gulp concat' in powershell the bundle folder remains empty, but the procedure seems work fine:
[20:17:22] Starting 'concat'...
[20:17:22] Finished 'concat' after
i'm new to gulp, many thanks
solved, I have had to set the relative path:
const gulp = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const watch = require('gulp-watch');
const minify = require('clean-css');
gulp.task('default', () => {
return watch('./asset/scss/*.scss',()=>{
gulp.src(['./asset/scss/main.scss','./asset/scss/*.scss'])
.pipe(concat('bundle.scss'))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./asset/css'))
})
})