mikestreety / gulp

A starting gulp file and package.json

Mike Street

• Website: https://www.mikestreety.co.uk/
• Mastodon: https://hachyderm.io/@mikestreety
• Instagram: https://www.instagram.com/mikestreety/

I am the CTO and Lead Developer for Brighton-based web agency Liquid Light. Working for a small agency I'm required to fill in the gaps in which bigger companies would have specialists. I've come to love every aspect of web development including frontend and backend, DevOps, InfoSec and CI/CD Pipelines.

When I'm not working, I enjoy cycling and spending time with my two kids. I can also be found reviewing beers and playing board games.

gulp's Issues

May be this gulpfile can help you

I wrote a gulpfile, with the help of your tutorial, and anothers; may be useful for the next version of your gulpfile.

I share my file with you :)

Typo

One too many right paren in line 81 (amended list of user agents) of gulpfile.js?

sourcemap

I'm using event-stream so that I can compile SASS and merge it with CSS in one task. It's working great my only problem is the sourcemap is getting merged inside the CSS.

gulp code

    gulp.task('css', function(){

        var sassGlob = "assets/css/**/*.scss";
        var cssGlob = "assets/css/**/*.css";;
        var dest = "./dist/css/min/'";

        // compile sass
        var sassFiles = gulp.src(sassGlob)
        .pipe(plugins.rubySass({
            style: 'expanded',  precision: 2
        }));

        // concatenate css + compiled sass
        return es.concat(gulp.src(cssGlob), sassFiles)
            .pipe(plugins.concat('style.min.css'))
            .pipe(gulp.dest(paths.styles.dest));
    });

source: main.SCSS

    header {
      padding: 2px;
    }

source: main2.css

    body {
        padding: 2px;
    }

output: style.min.css

    body {
        padding: 2px;
    }

    header {
      padding: 2px;
    }

    /*# sourceMappingURL=main.css.map */

    {
    "version": 3,
    "mappings": "AAAA,IAAK;EACD,OAAO,EAAE,GAAG",
    "sources": ["../main.scss"],
    "names": [],
    "file": "main.css"
    }

Things I've tried

1. tried: setting sourcemap of rubySass to 'none' result: no difference

    .pipe(plugins.rubySass({
        style: 'expanded', sourcemap: 'none', precision: 2
    }));

1. tried: gulp-concat-sourcemap, this creates my external sourcemap file but I still also have it inside my style.min.css

    return es.concatSourceMap(gulp.src(cssGlob), sassFiles)
            .pipe(plugins.concat('style.min.css'))
            .pipe(gulp.dest(paths.styles.dest));

When I inspected the output of the resulting sourcemap I noticed this

    {
      "version": 3,
      "file": "style.min.css",
      "sources": [
        "assets/css/other.css",
        "main2.css",
        "main2.css.map"
      ],
      "names": [],
      "mappings": "AAAA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;;ACLA;AACA;AACA;AACA;AACA;AACA;AACA"
    }

Based on that it seems it's concatenating the .map file to the CSS which is the behavior we see.
So I tried to filter it out.

3. tried: using gulp-filter to filter out the map file from being concatenated in the css result: no difference

    return es.merge(cssFiles, sassFiles)
            .pipe($.filter("!*.map))

"))

Error on plugins.rubySass

On this form:

var sassFiles =
    gulp.src(
        appFiles.sassStyles
    )
    .pipe(
        plugins.rubySass(
            {
                style: sassStyle,
                sourcemap: sourceMap,
                precision: 2
            }
        )
    )
    .on('error',
        function(err) {
            new gutil.PluginError(
                'CSS',
                err,
                {
                    showStack: true
                }
            );
        }
    );

I got an error; in doc of gulp-ruby-sass:

https://github.com/sindresorhus/gulp-ruby-sass

You can see:

Usage
sass(source, [options])

So, with a few changes made:

var sassFiles =
    plugins.rubySass(
        appFiles.sassStyles,
        {
            style: sassStyle,
            sourcemap: sourceMap,
            precision: 2
        }
    )
    .on('error',
        function(err) {
            new gutil.PluginError(
                'CSS',
                err,
                {
                    showStack: true
                }
            );
        }
    );

Works fine for me.

$ npm --version
3.8.6

package.json

"devDependencies": {
    "event-stream": "^3.3.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-combine-media-queries": "^0.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-load-plugins": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.0.6",
    "gulp-size": "^2.1.0",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "gulp.spritesmith": "^6.2.1"
  }

Regards.

Look into using gutil buffer instead of event stream

a1a17db#commitcomment-8472968

Couple questions

Hi!

I'm a bit gulp noob so I wanted to ask, how do you make sure that your CSS files are concatenated in order? Same with JS?

Also, when you are developing an index.html for example, with its reference tags for example:

<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

Can you automate it with gulp so that it automatically changes it to something like

<script src="allscripts.min.js"></script>

I tried with a couple plugins but they seem not to work properly. How do you face this issue? Do you change them by hand?

Thank you Mike!