EzDevInfo.com

how to debug gulp-sourcemaps not doing anything?

I have a fairly standard use case for gulp-sourcemaps

https://github.com/floridoo/gulp-sourcemaps

  gulp.src( bundle.src)
           .pipe(sourcemaps.init())
           .pipe(concat(bundle.dst + '.' + opts.ext))
            .pipe(uglify())
            .pipe(sourcemaps.write())
            .pipe(gulp.dest('./public/built'));

This produces appropriately concatenated and uglyified files. However there are no source map additions to them. bundle.src is an array of file paths. Not sure how to debug this.

Gulp Sourcemaps path

I am trying to use gulp-sourcemaps to generate source map.

Example code:

gulp.task('compressjs', function() {
    gulp.src(['public/js/**/*.js','!public/js/**/*.min.js'])
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(rename({
        extname: '.min.js'
    }))
    .pipe(gulp.dest('public/js'))
    .pipe(sourcemaps.write('/'))
    .pipe(gulp.dest('public/js'));
});

The output of the path is //# sourceMappingURL=/script.min.js.map, which is the wrong path. The correct one should be //# sourceMappingURL=script.min.js.map. How can I remove that extra / in the URL?

How to have sourcemaps include all my LESS files with gulp

I have two LESS files in my /less folder :

main.less:

@import 'vars';

body{
  background-color: @blau;
}

and vars.less

@blau : #6621ab;

My gulp task using gulp-less and gulp-sourcemaps

gulp.task('less', function () {
  gulp.src('./less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/'))
});

CSS generation (at /public/main.css) works fine, but in sourcemaps, i can only see main.less, not vars.less . Any idea? Thanks in advance

Why to inline source maps

Today I learned that it is possible to include source maps directly into your minified JavaScript file instead of having them in a separate example.min.map file. I wonder, why anybody wants to do something like that?

The benefit from having source maps is clear to me: one can for example debug errors with the original, non-compressed source files while running the minified files. The benefit from minimization is also clear: the size of source file is greatly reduced, making it quicker for browsers to download.

So why on Earth I would want to include the source maps into the minified file, given that the maps have size even greater than the minified code itself?

gulp-sass autoprefix sourcemap

This weekend I started playing around with gulp. I wanted to set up a task which can

• compile my sass files
  • keep working if I make mistakes in the sass file
  • work with sass Bootstrap
• generate sourcemaps
• append browser prefixes
• inject the compiled css wihtout browser reload
• fast (1-2 s top in dev env)

I got most of the steps but browser prefixes gave me a hard time Here is what I got so far

var browserSync = require('browser-sync');
var reload = browserSync.reload;
var filter = require('gulp-filter');
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var notify = require("gulp-notify");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');

var config = {
    sassPath: './sass',
    bower: './bower_components',
    bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets',
    fonts: './bower_components/bootstrap-sass-official/assets/fonts'
};

gulp.task('sass', function () {
    return gulp.src(config.sassPath + '/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                //outputStyle: 'compressed',
                outputStyle: 'nested',
                precision: 10,
                includePaths: [
                    config.sassPath,
                    config.bower,
                    config.bootstrap
                ],
                onError: function (err) {
                    notify().write(err);
                }
            }))
            .pipe(concat('app.css'))
            .pipe(autoprefixer('last 2 version'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('css'))
        .pipe(filter('**/*.css')) // Filtering stream to only css files
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('browser-sync', function() {
    browserSync({
        logLevel: "info",
        server: {
            baseDir: './',
            //directory: true,
            routes: {
                "/fonts": config.fonts
            }
        }
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch(['./**/*.html', 'js/**/*.js'], reload);
    gulp.watch('sass/*.scss',['sass']);
});

The problem is that the autoprefixer gives me an error and messes up the sourcemaps

The error I get: "gulp-sourcemap-write: source file not found:C:\WEB\skilldrill_v1\skilldrill\sass\app.css"

So for some reason it tries to find the css files in the sass dir

[Edit]
I managed to locate the problem, but couldn't solve it yet. The pipe this thing works: gulp-autoprefixer -> do some stuff -> prefixing tasks -> vinyl-sourcemaps-apply

On the 35th line of gulp-autoprefixer\index.js: applySourceMap(file, res.map.toString()); From this point the vinyl-sourmaps-apply understands that the current file (in my case app.css) becomes a source too.

Here are the problems: a) it thinks that the css file is in the same folder as specified in gulp.src() which is usually not true b) it doesn't work only with the lines added by the autoprefixer, but adds reference to every single line

Do you have any ideas based on this information ? I started digging in the gulp-concat which handles a similar issue properly.

Sourcemap wrong after combining vendor CSS with LESS and after gulp-minify

I'm trying to do the following:

1. Combine all CSS files (jQuery plugins)
2. Combine media queries
3. Minify CSS
4. Write sourcemap

after that I try to do something else in a different folder

1. Translate LESS
2. Combine media queries
3. Minify resulting CSS
4. Write sourcemap
5. Autoprefix stuff

That looks like this:

gulp.task('styles', function() {
  var streamCSS = gulp.src(sources.css)
    .pipe(sourcemaps.init())
    .pipe(concat('vendor.css'))
    .pipe(cmq())
    .pipe(minify({ keepSpecialComments: '*' }))
    .pipe(sourcemaps.write());

  var streamLESS = gulp.src(sources.less)
    .pipe(plumber({ errorHandler: errorHandler }))
    .pipe(sourcemaps.init())
    .pipe(less())
    .on('error', swallowError)
    .pipe(cmq())
    .pipe(minify({ keepSpecialComments: '*' }))
    .pipe(sourcemaps.write())
    .pipe(prefix("last 2 versions", "> 1%", "ios >= 6", { map: true }))
    .on('error', swallowError);

  return es.merge(streamCSS, streamLESS)
    .pipe(plumber({ errorHandler: errorHandler }))
    .pipe(concat('main.css'))
    .pipe(gulp.dest(destinations.css))
    .pipe(connect.reload());
});

The only Problem I have is that the resulting sourcemap is wrong and refering always to a wrong LESS file.

I use the following libraries to achieve this:

• gulp-concat
• gulp-less
• gulp-autoprefixer
• gulp-combine-media-queries
• gulp-sourcemaps
• gulp-minify-css

I know it would work if I leave out the vendor stuff, but I would like to have only one resulting stylesheet.

Thanks for every advice!

Uglify Minify and generate source map with Gulp

Can someone explain how to uglify, then concat and finally generate a source map using gulp? I cannot seem to get it working. I am not seeing anything in the API's about this but seems to me that it should be supported. The point is to generate the source map and have the source files be used when setting breakpoints. I have tried putting the concat first in the following code but when I do that the breakpoints do not work in chrome browser.

I am using
concat = require('gulp-concat'), and uglify = require('gulp-uglify').

gulp.src(['src/app.js', 'src/**/*.js'])
    .pipe(sourcemaps.init())
    .pipe(uglify({
        compress: {
            negate_iife: false
        }
    }))
    .pipe(concat("app.concat.js"))
    .pipe(rename('app.min.js'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('public/js'));

Sass Sourcemap with Chrome DevTools

We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:

...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({ 
  outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...

Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:

Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.

How to make sourcemap and comressped file using gulp

I'm trying to generate a sourcemap and minify it but it is not working.

file position: test/test.less

output: file name test/test.less

map file test.css.map

compressed file test.min.css

When I load that file on browser then it is not loaded, but when I load bootstrap.css.map file then it is showing every css or less file.

var gulp = require( "gulp" ),
    concat = require( "gulp-concat" ),
    watch = require( "gulp-watch" ),
    notify = require( "gulp-notify" ),
    less = require( "gulp-less" ),
    sourcemaps = require( "gulp-sourcemaps" );

var testCSSFile = "test/test.css";
var filePosition = "test";

gulp.task( "testCSS", function() {

    gulp.src( testCSSFile )
        .pipe( concat( "test.less" ) )
        .pipe( sourcemaps.init() )

        .pipe( less() )
        .pipe( sourcemaps.write( ".") )
        .pipe( gulp.dest(filePosition) )
        .pipe( notify( "testCSS task completed." ) );

     return gulp.src( testCSSFile )
        .pipe( concat( "test.min.less" ) )
        .pipe( less({
            compress: true
        }) )
        .pipe( gulp.dest(filePosition) )
        .pipe( notify( "testCSS task completed." ) );
});

gulp.task( "watch", function() {
    gulp.watch( testCSSFile, [ "testCSS" ] );
});

gulp.task( "default", [
    "testCSS",

    "watch"
] );

Best way to concat and uglify js in gulp

I am trying to do automation to concat and uglify js in gulp.

Here is my gulpfile.js:

gulp.task('compressjs', function() {
    gulp.src(['public/app/**/*.js','!public/app/**/*.min.js'])
    .pipe(sourcemaps.init())
    .pipe(wrap('(function(){"use strict"; <%= contents %>\n})();'))
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rename({
        extname: '.min.js'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/app'));
})

Do you think it is needed to wrap every file with (function(){"use strict"; <%= contents %>\n})(); to avoid conflict when every file is being join together? Do you think my gulp task is good, or it can even better for performing it's task?

Is there any way to compile less files with @imports and concatenate them with Gulp, all in the same stream?

I`m triyng this in my gulpfile.js:

gulp.task('buildStyles', function() { 
  return gulp.src([
    './styles/less/main.less',
    './styles/less/widgets/widgets.less',
    './styles/less/pages/pages.less',
    './styles/less/themes/default.less',
    './styles/less/rtl/rtl.less'
  ])
  .pipe(plumber())
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(concat('allmin.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./dest'));
});

But I always get a message like:

$ gulp buildStyles
[18:46:31] Using gulpfile /Library/WebServer/Documents/qjt2015/trunk/gulpfile.js
[18:46:31] Starting 'buildStyles'...
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/support-tickets.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/comments.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/article-comments.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/threads.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/chat.less

I`m using @imports within all my less files, and the references are those that appear as not found in the message. For example, my widgets.less file is as follows:

// ### Bootstrap's variables andmixins
@import "../../../bower_components/bootstrap/less/variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";
@import '../variables.less';
@import '../mixins.less';

@import './support-tickets.less';
@import './comments.less';
@import './article-comments.less';
@import './threads.less';
@import './chat.less';

Am I missing something? In advance, thanks for the help!

Gulp - sourcemaps - strange behavior

In my gulpfile.js, I'm trying to minify and enable sourcemaps in a release task.

Based on a config variable, I'm trying to pipe further actions into the stream. The check for the condition is using gulp-if-else. My set of dependencies (only relevant ones) are below

var gulp = require('gulp');
var browserify = require('browserify');
//... elided
var through= require('through2');
var sourcemaps= require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var ifelse = require('gulp-if-else');

Here's the code that I'm having trouble with. If I keep three ifelse pipe calls individually (currently commented out), then the source is uglified and sourcemap is created as expected.

Repeating the condition didn't feel clean - so I tried replacing it with the minify function - and then the behavior is strange.

1. If I don't give relative path in sourcemaps.write then the js file has a inline sourcemap.
2. With a relative path, source is uglified, the js has a sourcemap comment pointing to app.js.map but app.js.map itself is never generated

var minify = function() {
    var stream =  through({objectMode:true})
    stream
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write("./"));
    return stream;
};

var bundledStream = through({objectMode:true});
bundledStream
    // Report compile errors
    .on('error', handleErrors)
    .on('end', reportFinished)
    // Use vinyl-source-stream to make the
    // stream gulp compatible. Specifiy the
    // desired output filename here.
    .pipe(source(entry + '.js'))
    // Specify the output destination
    .pipe(buffer())

    // uncommenting the following three lines works

    //.pipe(ifelse(!config.debug,function() {return sourcemaps.init()}))
    //.pipe(ifelse(!config.debug, uglify))
    //.pipe(ifelse(!config.debug,function() {return sourcemaps.write("./")}))


    // this works partially?!? but I don't know why. I'd like this version to work
    .pipe(ifelse(!config.debug, minify))


    .pipe(gulp.dest(config.destFolder));

I'm just picking up gulp (and node, really) and ran into this weird behavior that I can't seem to reason about. Would be a great help if someone can demystify it for me.

UPDATE: Complete gulpfile.js

UPDATE2: Added gulp-filelog. added pipe(filelog("minify")) and pipe(filelog("outer")) to the streams. filelog prints two files inside the fn but only one file outside. Why is the second file being dropped/ignored? What am I missing?

[09:43:24] [minify] [1] [E:\....\Dashboard\app.js.map]
[09:43:24] [minify] [2] [E:\....\app.js]
[09:43:24] [outer] [1] [E:\....\Dashboard\app.js]
[09:43:24] [outer] Found [1] files.
[09:43:24] [minify] Found [2] files.

Chrome dev tools only showing one scss file

I'm running gulp to compile my sass files. The problem I'm running into is I'm only seeing one scss file when inspecting an element. If you need further information let me know.

I'm running node v0.12.2 My setup below:

SCSS Structure

src/scss/main.scss - imports various partials

Dev Dependecies

gulp": "^3.8.11",

gulp-sass": "^1.3.3",

gulp-sourcemaps": "^1.5.2"

Gulp File

gulp.task('sass', function (){
     gulp.src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('build/css'));
});

gulp.task('default', function(){
    gulp.start('sass');
});

Source Map

{"version":3,"sources":["includes/_buttons.scss","includes/_layout.scss","includes/_reset.scss"],"names":[],"mappings":"AAAA,AACC,AAAY,AACZ,AAAQ,AACR,AAAO,AACP,AAAQ,AAGT,AACC,AAAY,AACZ,AAAQ,AACR,AAAO,AACP,AAAQ,ACXT,AACC,AAAY,ACDb,AACC,AAAQ,AACR,AAAS","file":"main.css","sourcesContent":[".btn {\r\n\tbackground: #555;\r\n\tborder: 1px solid #999;\r\n\twidth: 100px;\r\n\theight: 50px;\r\n}\r\n\r\n.btn-large {\r\n\tbackground: #555;\r\n\tborder: 1px solid #999;\r\n\twidth: 200px;\r\n\theight: 100px;\r\n}","body {\r\n\tbackground: #333;\r\n}","* {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}"],"sourceRoot":"/source/"}

How does gulp-sourcemaps retrieve ** matched path from src method

I'm using gulp to build project, together with gulp-sourcemaps for generating sourcemaps.

I have several compnents like this:

public
 |-- src
      |-- comp1
      |     |-- c1-a.js
      |     |-- c1-b.js
      |
      |-- comp2
            |-- c2-a.js
            |-- c2-b.js

I'd like to build them into following strcture:

public
 |-- dist
 |    |-- comp1
 |    |     |-- c1-a.min.js
 |    |     |-- c1-a.min.js.map
 |    |     |-- c1-b.min.js
 |    |     |-- c1-b.min.js.map
 |    |
 |    |-- comp2
 |          |-- c2-a.min.js
 |          |-- c2-a.min.js.map
 |          |-- c2-b.min.js
 |          |-- c2-a.min.js.map
 |
 |-- src/

Currently my gulp task can generate files into correct path:

gulp.task('component', function() {
  gulp.src('./public/src/**/*.js', {base: './public/src'})
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(sourcemaps.write('.', {
      includeContent: false,
      sourceRoot: '/src/' // here's the problem
    }))
    .pipe(gulp.dest('./public/dist'))
})

but there are two problems:

1. the sourceRoot in map file is not correct: expecting "sourceRoot":"/src/comp1/" but the result is "sourceRoot":"/src/"

2. neither does sourceMappingURL in compressed file: expecting sourceMappingURL=c1-a.min.js.map but the result is sourceMappingURL=../../comp1/c1-a.min.js.map

How can I append the ** part to sourceRoot and fix sourceMappingURL?

Gulp browserify JS but replace revision references like gulp-usemin

So I've used gulp-usemin for a while and generally like it. In particular, I love the built in cache-busting ability

Before

<!-- build:js js/app.js -->
<script type="text/javascript" src="js/script1.js"></script>
<script type="text/javascript" src="js/script2.js"></script>
<script type="text/javascript" src="js/script3.js"></script>
<!-- endbuild -->

Run

return gulp.src( './public/index.html')
    .pipe( usemin({
        js: [uglify(), rev()]
    }))
    .pipe( gulp.dest('./dist') );

After

<script type="text/javascript" src="js/app-d8ce9cc5.js"></script>

However, recently I've been using browserify, which builds the source tree via node-style require statements.

Before

// index.html
<script type="text/javascript" src="js/app.js"></script>

// js/app.js
require('angular');
require('./ngmodules/customFilters');
require('./components/feature/feature');

Run

return browserify( './public/js/app.js' )
    .bundle()
    .pipe( source('bundle.js') ) 
    .pipe( streamify(uglify()) )
    .pipe( buffer() )
    .pipe( rev() )
    .pipe( gulp.dest('./dist/js') )

After

// index.html (no reference update)
<script type="text/javascript" src="js/bundle.js"></script>

The problem is if I use rev I have no ability to hash/cachebust the file. Is there any way to use the two in tandem? Or a an easy way to point my dist/index.html reference to bundle.js to the hashed version? I've read the gulp-rev recommendations but they seem horrible in comparison.

For context, I'm using Python/Django/Jade/Sass/Compass in the project.