Doing any sort of Javascript FullStack development on windows seems to be quite niche, so you usually have to spin up a VM with Ubuntu (other distros are available) or remote into a mac.

Well, t is perfectly possible to do Javascript development on windows, even from command line.

Although tools like Webstorm take a lot of the command liney stuff away if you’re working with node you generally have to go there eventually.

In this brief overview I’m going to introduce the concept of a task runner, by using gulp. A task runner is something that runs actions on your code and in the Fullstack world, this generally means concatenating and transpiling.  In this example I’ll show you how to concatenate CSS style files into a single stylesheet file.

So lets get on getting on!

—

Firstly, install NodeJS.

Create a folder which to host your app, and I’ll be referring to this as root.

Open up a command prompt and then browse to your new folder (or shift right click in the folder 😉 ).

Create a build folder and a src folder within root.

>mkdir build, src

Now, initialise the node package manager

>npm init

This will create a packages file for your local node installation. Adding –save to any npm install will save the corresponding reference to the package.json. adding –save-dev will add to your development dependencies. This allows you to have a set of dependencies you may need for running tests, and another for running the app online if needs be.

Now we create the file which will store the instructions for gulp.

>type NUL > gulpfile.js

Time we installed gulp proper (use –g if you want to install globally)

>npm install gulp –save-dev

At this point, only the packages we need should be installed, so as I am just smooshing up some style files, we only need gulp-concat

>npm install gulp-concat –save-dev

Now we need to open up the gulpset1 file and add the concat dependency.

We can use notepad for this (or install a cmdline editor if you don’t wish to leave the console window (Nano is great for this)).

>notepad gulpfile.js

Add the following line;

var gulp=require('gulp'), concat=require('gulp-concat');

Now we add the gulp task to concatenate the styles files..but we have no files to concat.

So, rustle up three css files called style1.css, style2.css, style3.css with some css in there,  and place them in the src folder.

We can create the gulp task to concat them.

Open up the gulpfile.js file in notepad again.

Add the following;

gulp.task('styles',function(){
  return gulp.src('src/*.css')
    .pipe(concat('style.css'))
    .pipe(gulp.dest('build/'))
});

This will set the source for the task to be all the css files in the src folder, pipe them all to concat into style.css then finally move them to their destination in the build folder.

And finally, to run gulp, just call gulp with the task name.

>gulp styles

If you get a not found error at this point, you may need to install gulp and gulp-concat as global (-g).

You’ll now find a concatenated styles file in the build folder called style.css.

Let’s go deeper.. And without any water wings.

Say I want to use LESS rather than css.

I alter my gulpfile to add another task, called style-less

gulp.task('style-less',function(){
  return gulp.src('src/*.less')
    .pipe(less())
    .pipe(concat('style2.css'))
    .pipe(gulp.dest('build/'))
});

But, we haven’t got the less plugin installed yet.. so it won’t work (chortle).

To get the less compiler to work we need to install the gulp less plugin, then add it to the dependencies in the gulpfile.js.

We also need some more style.less pages. So create three using a variation of the following (careful with the minus sign, ensure you have everything spaced out);

@redcolor:#C00;
@redcolor_dark:@redcolor - #222;

.textred{color:@redcolor}
.textdarkred{color:@redcolor_dark}

Run gulp with the style-less task and you should get a style2.css with the compiled and concatenated less created CSS.

The same concept follows using a javascript transpiler.  Pipe the files to the transpiler and put them in the destination.

But wait! I hear you cry! I thought Gulp was automagical!?

Ok, it is and as you insist. here is a brief overview of gulp watch.

You create a new task, call it “style-watcher”, then add a gulp watch instruction inside the task.

gulp.watch("src/*.less", ['style-less']);

Then run the style-watcher class and go and edit the stylesheet and see the magic.

I’ll let you work out how to watch the normal stylesheet files.

And that is pretty much the fundementals of Gulp. As you can see you can nest tasks, and run tasks within tasks. Gulp, alongside Grunt are the cornerstones of fullstack, node based, development. Grunt runs things a little different however,  namely in the complexity of the config, and the number of plugins due to its maturity.
However, remember all that Grunt and Gulp do is run the actual modules, so technically you don’t need either and you can do just the same with an npm build script. But thats for another day. 🙂

Take care.