Front-end build pipeline with Gulp

Frontend build pipeline with Gulp

Overview

In last posts I have build ASP.NET Core Web App with Microservice with Bower and hosted on Express. BTW it’s on Ubuntu. Now it’s time to set front-end build pipeline with Gulp. There is Grunt as well, but Gulp is supposed to be more sexy.

Why I need it? I’m lazy and it makes life easier, it can:

  • prepare deployment package
  • optimize all content
  • build & run multiple services with one script

That’s what I need

Install

As usual with Open Source there is cool Readme file. However I’m avoiding installing anything globally with npm. Having docker for this in future would be more difficult.
Using this should be enough:

$ npm install gulp --save-dev
mogluszka@mogluszkaW540:~/Sources/shout/src/web$ gulp
[22:14:43] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[22:14:43] Starting 'default'...
[22:14:43] Finished 'default' after 51 μs

Cool instruction is defined here: Automate your tasks with Gulp. When starting with Gulp it’s mentioned to use gulp-utils. I don’t see yet reason to do so, however log has convinced me:
log with console.log

[22:58:28] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[22:58:28] Starting 'default'...
gulp started
[22:58:28] Finished 'default' after 96 μs

log with gulp-utils

[22:58:10] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[22:58:10] Starting 'default'...
[22:58:10] gulp default started
[22:58:10] Finished 'default' after 1.3 ms

Building package

Now the key part. Currently my server and html points to current folder and all bower components.

//this will set up current folder as the one where index.html exists
app.use(express.static('.'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

This is a problem. I shouldn’t refer to current folder, There will be a lot of trash there (e.g. gulp) what shouldn’t be put on production servers.

gulp.task('copyHtml', ['default'], function() {
 
 // copy any html files in source/ to dist/
 gutil.log('copying html files');
 gulp.src('*.html').pipe(gulp.dest('dist'));
});

Running it…

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ gulp copyHtml
[23:33:44] Using gulpfile ~/Sources/shout/src/web/gulpfile.js
[23:33:44] Starting 'default'...
[23:33:44] gulp started
[23:33:44] Finished 'default' after 1.38 ms
[23:33:44] Starting 'copyHtml'...
[23:33:44] copying html files
├── bower.json
├── dist
│   └── index.html
├── gulpfile.js
├── index.html
├── index.js

It’s what I wanted. Now let’s go with a KISS and move there CSS as well.

gulp.task('copyHtmlandCSS', ['default'], function(copyHtml) {
   
  // copy any html files in source/ to dist/
  gutil.log('copying html files');
  gulp.src('*.html').pipe(gulp.dest('dist'));
  gutil.log('copying js')
  //that's nasty
  gulp.src('bower_components/bootstrap/dist/css/bootstrap.min.css').pipe(gulp.dest('dist/css'));
});
.
├── css
│   └── bootstrap.min.css
└── index.html

Now it’s time to reconfigure express

var express = require('express');
var app = express();

//this will set up current folder as the one where index.html exists
app.use(express.static('dist/'));

app.listen(3000, function () {
  console.log('[Express] Shout.Web started on 3000');
});

And run microservice and site:

mogluszka@mogluszkaW540:~/Sources/shout/src/web$ node index.js 
[Express] Shout.Web started on 3000
mogluszka@mogluszkaW540:~/Sources/shout/src/userService$ dnx kestrel
Hosting environment: Production
Now listening on: http://localhost:5000

Front-end build pipeline with Gulp part I… Done

front-end build pipeline with Gulp

Gulp seems to work. I have core things for front-end build pipeline with Gulp set up. All html files will be placed in distribution folder that I’ll be able to use on production. The unfortunate part is that I have hardcoded css file. This is something that I’ll need to address.

If you are interested in, please follow me on Twitter, like on Facebook or sign up to newsletter.

 

One thought on “Front-end build pipeline with Gulp

Leave a Reply

Your email address will not be published. Required fields are marked *