How can I minify CSS generated from LESS only to 'dist' folder? Of course all gulp plugins are corretly installed. Everything goes OK except minifying CSS.
Here is my code:
gulp.task('styles', function () {
return gulp.src('app/less/*.less')
.pipe($.less())
.pipe(gulp.dest('.tmp/styles'));
.pipe(minifyCSS({keepBreaks:false}))
.pipe(gulp.dest('dist/styles'));
});
If I move .pipe(minifyCSS({keepBreaks:false})) one line above it works. But I need to have compressed CSS only in dist forlder.
Thanks for advice.
It might not be the best way, but I use two different gulp tasks. One task that compiles the CSS into my build directory and then another task takes that output and minifies it into my dist directory. Use a task dependency to ensure that the file gets built before the minify task runs.
gulp.task('styles', function() {
return gulp.src(styles)
.pipe(concat('app.less'))
.pipe(gulp.dest('./build/styles'))
.pipe(less())
.on('error', console.log)
.pipe(concat('app.css'))
.pipe(gulp.dest('./build/styles'));
});
gulp.task('styles-dist', ['styles'], function() {
return gulp.src('build/styles/app.css')
.pipe(minifycss())
.pipe(gulp.dest('./dist/styles'));
});
Related
When I run gulp default task, gulp clean css creates first style.min.css. When I end this task and start again it creates styles.min.min.css and it happend continuously with adding .min every time so it create multiple style files. Here is my gulpfile.js:
gulp.task('sass', function () {
// Global Theme CSS Compilation
gulp.src('./sass/global/**/*.scss')
.pipe(sass()).pipe(gulp.dest('./css'));
gulp.src('./sass/themes/construction/*.scss')
.pipe(sass()).pipe(gulp.dest('./themes/construction/css'));
});
gulp.task('minify', function () {
// CSS Minify
gulp.src(['./css/*.css','!.css/*.min.css'])
.pipe(minifyCss()).pipe(rename({suffix: '.min'})).pipe(gulp.dest('./css'));
gulp.src(['./themes/construction/css/*.css',
'!./themes/construction/css/*.min.css'])
.pipe(minifyCss()).pipe(rename({suffix:
'.min'})).pipe(gulp.dest('./themes/construction/css/'));
});
gulp.task('watch',['sass'], function(){
gulp.watch(['./sass/global/**/*.scss', './sass/themes/construction/*.scss', './sass/themes/corporate/*.scss']);
});
What I need to do to prevent gulp create multiple files but just one and just update it?
You simply forgot a back slash in this line:
gulp.src(['./css/*.css', '!./css/*.min.css'])
in the negation part of the glob.
var paths = {
css: './public/apps/user/**/*.css'
}
var dest = {
css: './public/apps/user/css/'
}
// Minify and concat all css files
gulp.task('css', function(){
return gulp.src(paths.css)
.pipe(concatCSS('style.css'))
.pipe(minifyCSS({keepSpecialComments: 1}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest(dest.css))
});
When I first run the task it compiles alright and all changes are there.
After I change something and run it again it doesn't overwrite the existing minified css file. If I were to delete the minified css and run task again everything works perfect. Any insights?
Try and set the exact path, not a variable. Not that its not a good practice, just try without it.
Also , add a 'use strict'; to your task, so that you can be sure there are no serious errors with your settings. It will give you the right type of errors if there are any.
And, may I ask why are you concatenating your CSS before the production build?
Every file concatenation, minification and etc. should be performed in the 'build' task.
You have to delete your minified version of css before doing minify css.
To achieve this you can use gulp-clean
install gulp-clean as npm install gulp-clean
var gulp = require('gulp'),
concat = require('gulp-concat'),
cleanCSS = require('gulp-clean-css'), // this is to minify css
clean = require('gulp-clean'), //this is to delete files
gulp.task('del-custom-css', function(){
return gulp.src('./static/custom/css/custom.min.css',{force: true})
.pipe(clean())
});
gulp.task('minify-custom-css', ['del-custom-css'], function(){
return gulp.src(['./static/custom/css/*.css'])
.pipe(concat('custom.min.css'))
.pipe(cleanCSS())
.pipe(gulp.dest('./static/custom/css'))
});
Hope it helps.
I am trying to migrate a project to gulp-sass workflow. After reading some tutorials online, I have setup a very basic gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass'),
concat = require('gulp-concat');
gulp.task('styles', function() {
return gulp.src('scss/*.scss')
.pipe(sass({
'sourcemap=none': true
}))
.pipe(gulp.dest('css/'))
});
gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['styles']);
});
I want to generate a *.css file from every *.scss file that doesn't begin with underscore.
My problem: with current gulpfile, gulp will detect changes on .scss files and rebuild ALL libraries, instead of building only the ones which have been affected by the change.
For example, I have 2 libs on my project:
lib1, which #imports partials p1 and p2
lib2, which #imports partials p2 and p3
If I edit partial p1, I want only lib1 to be updated.
If I edit partial p3, I want only lib2 to be updated.
If I edit partial p2, I want both lib1 and lib2 to be updated.
Current setup updates both libs on every edit that I make in any of the *.scss sources.
In other words, I would like gulp-sass to behave the same way as sass --watch does. Is this possible? How?
thanks!
Currently you're targeting all scss files in your watch task:
gulp.watch('scss/**/*.scss', ['styles']);
You can narrow it down to a subfolder or to specific files. You can breakdown your watch task into 2 parts, for example:
gulp.watch('scss/p1/**/*.scss', ['stylesP1', 'stylesP2']);
gulp.watch('scss/p2/**/*.scss', ['stylesP2', 'stylesP3']);
And then create 2 style tasks to match:
gulp.task('stylesP1', function() { /* Your task actions */ });
gulp.task('stylesP2', function() { /* Your task actions */ });
gulp.task('stylesP3', function() { /* Your task actions */ });
I have the need to compile a SASS file to a CSS file when saved, without having to compile every SASS file to a single CSS file.
I need the ability to:
- Run a 'watch' on a directory
- If a file is saved, a CSS of it's name is created. Example: 'main.scss' compiles to 'main.css'.
- It should not compile every single SASS if it doesn't need to.
The goal is to optimize the development process to avoid compiling every single SASS file in a directory when 'watching'.
My current SASS task looks a bit like this and results in a single CSS file:
//Compile Sass
gulp.task('styles', function() {
return gulp.src('app/scss/styles.scss')
.pipe(plugins.sass({ includePaths : [paths.sass], style: 'compressed'})
.pipe(plugins.autoprefixer('last 2 version'))
.pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.minifyCss())
.pipe(gulp.dest('build/css'));
});
Looks like gulp-changed is what you're looking for:
https://github.com/sindresorhus/gulp-changed
You add it as a dependency with npm install --save-dev gulp-changed and plug it into your gulpfile. From the gulp-changed ReadMe:
var gulp = require('gulp');
var changed = require('gulp-changed');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'dist';
gulp.task('default', function () {
return gulp.src(SRC)
.pipe(changed(DEST))
// ngAnnotate will only get the files that
// changed since the last time it was run
.pipe(ngAnnotate())
.pipe(gulp.dest(DEST));
});
I'm using gulp-ruby-sass to compile my js and sass.
I ran into this error first TypeError: Arguments to path.join must be strings
Found this answer and it was because I was using sourcemaps with gulp-sass and the answer recommended using gulp-ruby-sass instead.
Next I tried to compile all my SASS files using this syntax:
gulp.task('sass', function () {
return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(concat('bitage_public.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
Which produced this error:
gulp-ruby-sass stderr: Errno::ENOENT: No such file or directory - public/_sources/sass/**/*.scss
I then noticed in the answer I found the author wrote that globes ** aren't supported yet:
Also keep in mind, as of this writing when using gulp-ruby-sass 1.0.0-alpha, globs are not supported yet.
I did more digging and found a way to use an Array to specify the paths to my SASS files, so then I tried the following:
gulp.task('sass', function () {
return sass(['public/_sources/sass/*.scss',
'public/_sources/sass/layouts/*.scss',
'public/_sources/sass/modules/*.scss',
'public/_sources/sass/vendors/*.scss'], { style: 'compressed' })
// return sass('public/_sources/sass/**/*.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(concat('bitage_public.css'))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
But still I'm getting Errno::ENOENT: No such file or directory and it lists all the dirs I put into that array.
How do you compile SASS in multiple directories with gulp?
SASS source folder structure:
_sources
layouts
...scss
modules
...scss
vendors
...scss
main.scss
Figured it out!
Well not 100%, still not sure why the multiple path array didn't work.
Anyways so I forgot that in my main web.scss file I already had multiple import statements setup:
#import "vendors/normalize"; // Normalize stylesheet
#import "modules/reset"; // Reset stylesheet
#import "modules/base"; // Load base files
#import "modules/defaults"; // Defaults
#import "modules/inputs"; // Inputs & Selects
#import "modules/buttons"; // Buttons
#import "modules/layout"; // Load Layouts
#import "modules/svg"; // Load SVG
#import "modules/queries"; // Media Queries
So I didn't actually need to try use Gulp the way I was trying, I just needed to target that 1 .scss file directly. So I did that here:
// Compile public SASS
gulp.task('sass', function () {
return sass('public/_sources/sass/bitage_web.scss', { style: 'compressed' })
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('public/_assets/css'))
.pipe(livereload());
});
Now it works because it sees a specific file to target and compile
I was having trouble using '*.scss' too
In the git documentation (https://github.com/sindresorhus/gulp-ruby-sass) they use this sintax:
gulp.task('sass', function(){
return sass('public/_sources/sass/',
{ style: 'compressed'})
.pipe(sourcemaps.init())
});
I tested it and it works, it compiles all the files within the folder.
Just in case someone has the same problem