I am struggling to get my SASS sourcemaps to work correctly. The problem seems to be the "sources" attribute within the sourcemap and how my SASS files are nested.
I have a Gulp task that compiles SASS to CSS. Here is an example of that
var paths = {
styles: {
src: './Stylesheets/SCSS/',
files: './Stylesheets/SCSS/**/*.scss',
dest: './Stylesheets/CSS/'
}
}
gulp.task('compile-sass', function (){
return gulp.src(paths.styles.files)
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed',
includePaths : [paths.styles.src]
}))
.pipe(prefix({
browsers: ['last 2 Chrome versions'],
cascade: false
}))
.pipe(sourcemaps.write('../Maps/', {
includeContent: false,
sourceRoot: '../SCSS'
}))
.pipe(gulp.dest(paths.styles.dest));
});
The above works for everything else - writing maps to disk, prefixing etc. I am using latest nodejs, gulpjs and relevant npm packages.
An example of folder/asset structure from within my Stylesheets folder:
SCSS/print.scss
SCSS/sectionA/style.scss
SCSS/sectionA/partial/_partialA.scss
SCSS/sectionA/partial/_partialB.scss
SCSS/sectionB/... etc
For SASS files in the root of SCSS/ the sourcemaps work properly. Chrome will show where the source styles are.
For SASS files in a subfolder within SCSS/ the sourcemaps do not work. The problem is the "sources": attribute has the wrong file listed in it.
The print.scss map for example will correctly have "sources":["print.scss"]. But sectionA/style.scss map will have "sources":["style.css"] instead of "sources":["partial/_partialA.scss", "partial/_partialB.scss"] as I would expect.
I have confirmed moving /SCSS/sectionA/style.scss to /SCSS/style.scss and amending any import paths does solve the issue. But I need it to be nested, not in the root of /SCSS.
If I can provide more detail please let me know. I have tried the answer from Path to source map is wrong and it does not solve my issue. I have also tried manipulating mapSources with no avail.
# Update 2019-05-24
My answer talks about using CSSNext. CSSNext was deprecated. The theory in my answer is still applicable using postcss-preset-env.
# Update 2017-03-08
After experimenting with PostCSS, I have used CSSNext to process the CSS after SASS has converted it. CSSNext auto-prefixes and doing it this way retains the connection to the original scss files in the sourcemap.
See my GitHub repo for an example.
After following Mark's feedback and investigating the gulp-autoprefixer module I believe this issue raised on the GitHub repo for gulp-autoprefixer is related to the incorrect sourceroot problem.
Using a variation of the hack from ByScripts I am able to get sourcemaps with the correct sourceroot for nested scss files. The hack used in the ByScripts gulpfile inits the sourcemaps function twice. Once before prefixing, and once after.
I have created a GitHub repo to try and illustrate a reduced test case and a workaround. Inspecting the css produced by the workaround shows the correct relationship back to the source scss.
Related
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 am trying to move on from WelandJS. (Yes, I know, it was discontinued years ago) but it was working.
Anyway, for the life of me I cannot get GULP and DurandalJS to play nicely.
Heres my code
var gulp = require('gulp');
var durandal = require('gulp-durandal');
gulp.task('durandal', function(){
durandal({
baseDir: 'app',
main: 'main.js',
output: 'main-built.js',
almond: true,
minify: true,
rjsConfigAdapter : function(rjsConfig){
rjsConfig.deps = ['text'];
return rjsConfig;
}
})
.pipe(gulp.dest('app'));
});
gulp.task('default', ['durandal']);
I have tried with Almond. Without.. with and without the rjsConfigAdapter.
All I want to do is minify and bundle my files. Nothing else. Don't know why this has to be like pulling teeth. But, Seems no matter what I do, it will NOT minify. After hours of work I have it bundling. You would think a simple flag called "minify" being true would in-face produce a minified .JS file. Hummmmm??
Is there a better solution than using GULP? (Project is DurandalJS (HUGE MISTAKE) inside VS 2017, ect ect ect)
if Gulp is truly the way to do, has anyone actually gotten this to work? With a real production app?
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 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
I'm developing a sample application which uses bower for it's dependency management and gulp for it's build system.
I've used the main-bower-files plugin to copy all of the relevant files from the bower_components directory into a build/dist/bower_components directory.
This all works perfectly, and I can open my application's index.html which properly points to each of these files and they properly point to the assets.
My next step is to concatenate the bower_components so that I have a single CSS and a single JS file along with all of the assets (fonts, images, etc.). I have used gulp-useref to bundle all of the components, and it seems to work nicely.
However, some of the CSS and JS files being combined use relative paths to reference assets which are now incorrect since everything is in a single file:
FontAwesome
Bootstrap
and a custom bower component we are creating
Is there a standard solution for fixing the assets?
Do I need to use gulp to update the asset references or perhaps use a different plugin?
Using gulp-replace plugin we can concatenate bower_components assests.
For example:
var replace = require('gulp-replace');
gulp.task('fix-paths', ['minify'], function() {
gulp.src('public/css/site.css')
.pipe(replace('../', '../bower_components/bootstrap/dist/'))
.pipe(gulp.dest('public/css'));
});
I am using the gulp inject plugin to inject the concatenated file to the html. Something like this -
gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() {
gulp.src('./*.html')
.pipe(inject(gulp.src(['./dist/js/**/*.js'])
.pipe(angularFilesort()), {
'ignorePath': 'dist/js',
'addRootSlash': false,
'addPrefix': 'scripts'
}))
.pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], {
read: false
}), {
'name': 'vendors',
'ignorePath': 'dist/vendors',
'addRootSlash': false,
'addPrefix': 'vendors'
}))
.pipe(inject(gulp.src(['./dist/css/*.css'], {
read: false
}), {
'ignorePath': 'dist/css',
'addRootSlash': false,
'addPrefix': 'styles'
}))
.pipe(gulp.dest('dist'));
});
Let me know if you need any more code.
For CSS, I would suggest using gulp-rework, which wraps rework that has a number of very helpful plugins.
One of these is url, which provides a function for updating the urls contained within CSS.
An example where this is useful, is in CSS that contains no path to replace; e.g.
url(backgroundimage2.png)
Or, you want to perform different alterations of the URL based on type (e.g. only images, not web fonts).
A function can be composed that tests for asset type; the following example processes only image files:
// CSS
.pipe(cssFilter)
.pipe(rework(reworkUrl(function (url) {
// modifications on url, e.g. using http://medialize.github.io/URI.js/
if (url.match(/[^/]+(jpg|jpeg|png|gif)$/))
{
return '/lib/img/' + url.replace('../', '');
}
else
{
return url;
}
})))
Recently I found same problem so gone through various solutions and one of them was to replace the content of css in this answer itself. After looking the font-awesome.css it was clear that it refers relative path to reach fonts folder. same was the case with bootstrap css. Solution is simple now always make sure to keep css and fonts folder at same level and copy data. Even include your app specific min files here. Single place for all dist files makes life easy