I want to make gulp watch for all changes on my work folders but to generate only one file. Because I use scss which imports all required files, there is no need to compile all .css files, only main one.
Now, my gulpfile.js contains:
var gulp = require('gulp');
var util = require('gulp-util');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});
gulp.task('watch', function() {
gulp.watch('./sass/**/*.scss', ['sass']);
});
And I have to go in ./sass/style.scss and save it to triger gulp watch.
I want gulp to watch all files (something like ./**/*.scss) but to render only one - ./sass/style.scss. How to achieve that?
Solution to this is simple, just edit watch part of the gulpfile.js to:
gulp.task('watch', function() {
gulp.watch('./**/*.scss', ['sass']);
});
Which says: watch for all .scss and on change run 'sass' taks.
'sass' taks compiles only ./sass/style.scss'
No need to change anything in gulpfile.js. There is another simpler method you need only add underscore to all SCSS files that are being imported with #import statement (like _*.scss), this will forbid compiler to create separate CSS files.
Example:
mymodular.scss => _mymodular.scss
Guidelines from SCSS documentation
Partials
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a
great way to modularize your CSS and help keep things easier to
maintain. A partial is a Sass file named with a leading underscore.
You might name it something like _partial.scss. The underscore lets
Sass know that the file is only a partial file and that it should not
be generated into a CSS file. Sass partials are used with the #use
rule.
Related
I have already compiled css files for external libraries like bootstrap, datatable etc. inside a css folder. These files will never be changed at any point so I don't want to compile their scss files and build out every time, hence the use of their css version.
However, I have a scss folder where all the styles for the application are written. What I want to achieve is, every time a change is made to a scss file, compile the scss and generate a css and then bundle this css with the two vendor css files (bootstrap, datatable) to create one single stylesheet and copy it over to the bundles folder.
wwwroot
--- bundles
--- css
--- bootstrap.css, datatables.css
--- js
--- scss
--- components
--- comp1.scss
--- comp2.scss
--- layout
--- header.scss
--- footer.scss
--- main.scss
const {src,dest,watch,series,parallel} = require('gulp');
const sass = require('gulp-sass')(require('sass')),
prefix = require('gulp-autoprefixer'),
minify = require('gulp-clean-css'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
function compileScss() {
return src('wwwroot/scss/main.scss')
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true
}))
.pipe(prefix())
.pipe(sourcemaps.write('.'))
.pipe(dest('wwwroot/css/'));
}
function cssBundle() {
return src([
'wwwroot/css/bootstrap.min.css',
'wwwroot/css/dataTables.css',
'wwwroot/css/main.css'
])
.pipe(concat('styles.css'))
.pipe(dest('wwwroot/bundles/'));
}
function watchTask() {
watch('wwwroot/scss/**/*.scss',
parallel(compileScss));
}
exports.default = series(
parallel(compileScss),
cssBundle,
watchTask
);
The above code works fine first time when I run the >gulp command but any subsequent changes I make to scss files only work as far as compiling and generating the main.css and not bundling with the other two files as watch task continues to run in the background.
Just wondered how I can tell the task to compile the scss, then bundle with the vendor files and copy to the bundles folder every time a change is made to scss.
Thanks in advance
I'm trying understand some of the details of this gulpfile from foundation-emails-template.
Here is an excerpt from the file for the part I am curious about:
// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, pages, sass, images, inline));
As you can see, the build task calls a bunch of methods in order. One of them is the sass method, and one following that is the inline method:
// Compile Sass into CSS
function sass() {
return gulp.src('src/assets/scss/app.scss')
.pipe($.if(!PRODUCTION, $.sourcemaps.init()))
.pipe($.sass({
includePaths: ['node_modules/foundation-emails/scss']
}).on('error', $.sass.logError))
.pipe($.if(PRODUCTION, $.uncss( // <- uncss happening here
{
html: ['dist/**/*.html']
})))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest('dist/css'));
}
// Inline CSS and minify HTML
function inline() { // <- Inlining happening here
return gulp.src('dist/**/*.html')
.pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
.pipe(gulp.dest('dist'));
}
So, the sass method gets called first, which compiles the sass files into a single app.css. Part of this method also says to use uncss to remove unused css from the html files. The inline method is responsible for inlining the css into those html files.
I am confused why this works correctly. How is it that inline can be called after scss? The inline method places css in the html files that the scss method "uncss-es", yet it's called afterwards.
This seems to work correctly, so clearly I am just not understanding some sort of basic concept with gulp. Can anyone explain how this works?
Uncss removes unused css rules from your app.css file. It scans your html files and removes any rules for which it can find no selector, via querySelector() in the html file. So app.css has been cleansed before it is then inlined into your html files. This is order you would want. The css is cleaned, not the html.
I have been working on a project for a while, using Gulp for compiling SCSS to CSS (making one CSS file from several SCSS files), minifying CSS, also watching file changes and reloading page with Browser Sync.
While changing some scss and html code and not doing anything to the gulpfile and not renaming any files, page in a browser has suddenly failed and said that it cannot find a page.
I tried to reload the page with "gulp" command and it didn't help.
Now I have several problems. Gulp:
- stopped watching changes;
- compiling scss to css;
- opening and reloading page.
All these worked perfectly before this problem.
Here's my code for Gulp:
var gulp = require("gulp");
var sass = require("gulp-sass");
var watch = require("gulp-watch");
var csso = require("gulp-csso");
var concat = require("gulp-concat");
var browserSync = require("browser-sync").create();
/* Static Server + watching scss/html files */
gulp.task("serve", ["sass"], function() {
browserSync.init({
server: "./"
});
gulp.watch("*.html").on("change", browserSync.reload);
gulp.watch("sass/*.scss", ["sass"]).on("change", browserSync.reload);
});
/* Compile Sass into CSS & auto-inject into browsers */
gulp.task("sass", function() {
return gulp.src("sass/*.scss")
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("css"))
.pipe(browserSync.stream());
});
/* Concatenate and minify CSS */
gulp.task("css:build", function() {
gulp.watch("css/*.css").on("change", function() {
return gulp.src("css/*.css")
.pipe(concat("style.concat.css"))
.pipe(csso({
comments: false
}))
.pipe(gulp.dest("css_result"));
});
});
gulp.task("default", ["serve", "css:build"]);
If I run "gulp" in command line now it shows this:
enter image description here
Why could it happen and what steps should I do now?
Solved
Problem's solved. There was a mistake inside one sass file. After a correction everything started working without any other changes.
I would simplify this:
gulp.watch("sass/*.scss", ["sass"]).on("change", browserSync.reload);
to
gulp.watch("sass/*.scss", ["sass"]);
since you are already calling browserSync.stream() at the end of your 'sass' task. Also, try this instead of the browserSync.stream() call:
.pipe(browserSync.reload({stream: true}));
I assume your html file being served by browserSync has the css links produced by the 'sass' task NOT the css produced by the 'css:build' task. Otherwise you will have other problems, probably race issues since your 'css:build' task is running after the 'sass' task produced css is reloaded into the browser.
Let me know if this works for you.
Problem's solved. There was a mistake inside one sass file. After a correction everything started working without any other changes.
I'm trying to #import some bootstrap 4 sass files from node_modules but my gulp watcher isn't picking up any changes to those node_modules bootstrap files.
In my main sass file I'm importing bootstrap via:
#import "bootstrap-grid";
#import "bootstrap-reboot";
#import "custom";
Then I also import some "local" sass files (outside of node_modules):
#import "some-file";
#import "some-other-file";
etc.
These local sass files are watched fine, I get recompilation when I do my edits/file save.
My sass gulp task looks like this:
//compile sass
gulp.task('sass', function() {
return gulp.src('src/css/scss/**/*.scss')
.pipe(sass({
includePaths: ['node_modules/bootstrap/scss/']
}))
.pipe(gulp.dest('src/css/'));
});
The key part for me to pick up the bootstrap files was to use the includePaths part.
I am getting the bootstrap grid and what I'm wanting to do is update the node_modules/bootstrap/scss/_custom.scss (which I'm importing) to place bootstrap overrides in.
I'm not quite sure how to get the bootstrap to recompile when I edit/save any node_modules bootstrap files.
I tried updating the includePaths to:
includePaths: ['node_modules/bootstrap/scss/**/*.scss']
But that throws an error, "file to import not found" (bootstrap-grid) which also seems odd to me because it seems like it should be adding/watching sass files (and any sub-directories) down in bootstrap/scss.
My file structure at this point is very simple:
root
|
| node_modules
| bootstrap
| scss
| src
| css
| scss
gulpfile.js
Try adding the sass files from the node_modules to gulp.watch:
gulp.watch([
'node_modules/bootstrap/scss/**/*.scss',
'src/css/scss/**/*.scss'
], ['sass']);
Hope that helps.
I have a Gulpfile that uses gulp-cssmin to minify my CSS, and I am also trying to get inline sourcemaps using gulp-sourcemaps (see code below). Without piping anything through Cssmin, my inline sourcemaps totally work. But when I try to pipe everything through Cssmin at the end of my 'sass' task, my inline sourcemaps stop working.
// Compile SASS to CSS, add vendor prefixes, write sourcemaps, then minify
gulp.task('sass', function(){
return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(sourcemaps.write())
.pipe(cssmin())
.pipe(gulp.dest('./_styles'));
});
Anyone have any ideas as to what I'm missing here? Or if I've just got things in the wrong order? Do inline sourcemaps still work with minified CSS? Or is it something specifically with gulp-cssmin?
I couldn't find a previous answer on Stack Overflow that dealt specifically with sourcemaps in relation to gulp-cssmin, so please enlighten!
Thanks.
I'm assuming you are using https://www.npmjs.com/package/gulp-cssmin.
gulp-cssmin uses https://www.npmjs.com/package/clean-css for cleaning the css, and thus the options of clean-css apply. However, since the css delivered to cssmin already contains a source map, it needs to be forwarded to clean-css, but this apparently isn't currently happening:
should pass input source map to minify() as second arg as seen in the second example: https://github.com/jakubpawlowicz/clean-css/blob/master/README.md#how-to-work-with-source-maps
but minify() call here doesn't: https://github.com/chilijung/gulp-cssmin/blob/master/index.js#L42
Therefore it doesn't currently seem to be possible to configure gulp-cssmin to update source maps.
I have added issue https://github.com/chilijung/gulp-cssmin/issues/22 requesting to add the missing functionality.
UPDATE
I found https://www.npmjs.com/package/gulp-clean-css which also uses clean-css behind the scenes AND supports source maps!
You need to update your code to:
var cleanCSS = require('gulp-clean-css');
gulp.task('sass', function(){
return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./_styles'));
});
i.e. move the cleanCSS() before sourcemaps.write().
In general, here is a good list of gulp plugins that support source maps: https://github.com/floridoo/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support