Skip to content

gulp

Try to understand gulp better, it is rather like a Makefile, they even accept gulpfile.js and Gulpfile.js.

the tasks gulpfile

Note there is a mayor gulp docs file in dev. Put interesting stuff from this file there if possible. For the remainder it is just trying to understand how the gulpfile from here works.

the plugins

There are a lot of plugins loaded in the beginning. Let's also see what they do.

var gulp = require("gulp");
var nodemon = require("gulp-nodemon");
var concat = require("gulp-concat");
var postcss = require("gulp-postcss");
var cssnano = require("cssnano");
var notify = require("gulp-notify");
var postcssMixins = require("postcss-mixins");
var simplevars = require("postcss-simple-vars")();
var autoprefixer = require("autoprefixer");
var browserSync = require("browser-sync");
var postcsseasyimport = require("postcss-import");
var postcssColorFunction = require("postcss-color-function");
var assets = require("postcss-assets");
var nested = require("postcss-nested");
  • gulp is clear see
  • gulp-nodemon is an aid for node applications and restarts the app when certain files change see
  • gulp-concat just does that, concatenate javascript files in the order presented. Note that it also points to gulp-sourcemaps, which creates sourcemaps so you can find the original files back in debugging. see
  • gulp-postcss A tool for transforming CSS with JavaScript visit
  • cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.visit
  • gulp-notify : sends notifications to a systems notification system. you can read these with zenity. I removed this one since i presume it will only be annoying
  • postcss-mixins : needed for various postcss mixins mentioned next visit
  • postcss-simple-vars : PostCSS plugin for Sass-like variables.
  • autoprefixer : visit plugin to parse CSS and add vendor prefixes to CSS rules using values from visit
  • browserSync : neat program for monitoring en development : visit
  • postcss-import : visit This plugin can consume local files, node modules or web_modules.
  • postcss-assets : visit PostCSS Assets is an asset manager for CSS. It isolates stylesheets from environmental changes, gets image sizes and inlines files.
  • postcss-nested: visit unnest css like sass does it.

the server

const server = browserSync.create();

This will create the browserSync server instance, it will be started later.

the default action

It is at the end of the file, but logically it is the first step after creating the browserSync server.

const dev = gulp.series(serve, nodeDev);
exports.default = dev;

This is the 'main' function , and it says 'perform serve and nodeDev in sequence'

serve

function serve(done) {
    server.init(null, {
        proxy: "localhost:3000",
        open: false,
        files: ["public/**/*.*"],
        port: 7000,
    });
    done();
}

The init function starts watching and serving the webpage on port 3001. It keeps track of the files mentioned. proxy means proxy an existing vhost, so our app running on port 3000. Use port 7000 for the output. Open: false stops the browser from automatically starting.

nodeDev

This function runs after serve, and it creates a nodemon stream, with tasks like css and js.

In package.json, the start command for express is 'npm start' which is the same as 'node ./bin/www'

So bin/www is where the real application start for express. This is also the entry we need to put in the script parameter of nodemon.

  var stream = nodemon({
        script: "./bin/www",

This is cause of the problem why i wrote this chapter, it said script: "app.js" which causes this command fired.

node app.js

And that just directly returns !

But let's finish this.

css

This script is very css heavy, while we only use a simple style.css. But it may com in handy later on so 

gulp.task("css", function (done) {
    var processors = [
        postcsseasyimport(),
        postcssMixins,
        simplevars,
        nested,
        assets({
            relative: true,
        }),
        postcssColorFunction(),
        autoprefixer(),
        cssnano(),
    ];

    gulp.src("./public/stylesheets/style.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./public"))
    done();
});

The whole battery of mixins and plugins is run against our style.css, which won't do very much because it is plain .css. But by all means try to alter that to postcss flavour css.

This step takes public/stylesheets/style.css and puts it in public/style.css where it is at least minified in this step.

js

This is the step we needed to implement. This is now a small function but i will try to augment it when needed.

gulp.task("js", function (done) {
    gulp.src("src/*.js", { sourcemaps: true })
        .pipe(concat("interface.js"))
        .pipe(gulp.dest("./public"))
    done();
});

It takes all sources in src/*.js and concatenates them into public/interface.js. Note that this now does nothing, since we have built the app with this rule in package.json.

browserify src/main.js -p esmify -o public/bundle.js --debug

It even fails at this point as we have rearranged the ui library. So let's alter this in gulp and see if we can generate the application that way. The browserify rule says to create bundle.js so we could just take interface.js instead.