Setting up your local dev environment with Gulp and Webpack

 

 

 

 

 

In a typical frontend Development environment, it is typical for developers to have a boiler plate configuration to have a ready to start coding project setup, which would include the following features already built in for swift and clean build and testing

1. A task manager with commonly used build tasks
2. A development server which is spinned off once you start development
3. A module bundler to convert your modular source code to a browser servable version.

In this setup i would be using the following tech stack

• Gulp as the task manager
• Webpack as the module bundler and as the dev server
• Node package manager

Here is a detailed rundown

1.Install node

Go to http://nodejs.org

Node installation comes with npm (node package manager)

$ node -v
v0.12.7
$ npm -v
2.11.3

2. Setup a new npm project

$ mkdir MyAwesomeProject
$ cd MyAwesomeProject
$ npm init

3. Install gulp and its utils/tasks

$ npm install gulp --save-dev
$ npm install gulp-util --save-dev
$ npm install gulp-uglify --save-dev
$ npm install gulp-concat --save-dev
$ npm install gulp-sourcemaps --save-dev

4. Install webpack and webpack dev server

Before installing Webpack lets understand what is Webpack, it’s a module bundler which has the capability to transform your code which is written in any of the prevalent modular design patterns e.g AMD, CommonJS, ES6 import, RequireJS into plain modules in javascript which when attached to a html, will seamlessly work.

Webpack is the more powerful evil cousin of Browserify. Additionally, it provides an option to spinoff a dev server in your desired port along with the capabilities of watching resources.

$ npm install webpack --save-dev
$ npm install webpack-dev-server --save-dev
$ npm install webpack-stream --save-dev //seamlessly integrate webpack with gulp

5. Create the webpack config file

webpack.config.js

entry config is where you tell webpack where the flow starts in your webpage.

output config tells webpack to produce the transformed script in the desired path.

extensions is a config which tells webpack to automatically add matching extensions in the matching dependencies invoked in the source code. You can also give optional configs like cache, debug and devtool.

 var path = require('path');
 module.exports = {
 cache: true,
 debug: true,
 devtool: 'eval',
 entry: './src/app.js',
 output: {
 path: path.join(__dirname, "build"),
 filename: 'build.min.js'
 },
 resolve: {
 extensions: ['', '.js', '.json', '.coffee']
 }
 };

6. Create the Gulpfile.js

Gulpfile.js is the place holder where you will define all your common build/ lint tasks and combine it with webpack.

Get all the dependencies:

var gulp = require('gulp');
 var concat = require('gulp-concat');
 var uglify = require('gulp-uglify');
 var sourcemaps = require('gulp-sourcemaps');
 var gutil = require("gulp-util");
 var webpack = require("webpack");
 var WebpackDevServer = require("webpack-dev-server");
 var webpackConfig = require("./webpack.config.js");
 var stream = require('webpack-stream');

Here is what the project structure looking like:

├── index.html
 ├── package.json
 ├── Gulpfile.js
 ├── webpack.config.js
 ├── src/**/*.js
 └── app.js
 └── module1.js
 └── module2.js
 ├── images (all images stored here)
 ├── js (all js files stored here)
 └── styles (all .less/.css files stored here)

7. Lets add some juice to our gulp (pun intended!)

7.1 First lets add the webpack task

var path = {
 HTML: 'src/index.html',
 ALL: ['src/**/*.jsx', 'src/**/*.js'],
 MINIFIED_OUT: 'build.min.js',
 DEST_SRC: 'dist/src',
 DEST_BUILD: 'dist/build',
 DEST: 'dist'
 };
 gulp.task('webpack', [], function() {
 return gulp.src(path.ALL) // gulp looks for all source files under specified path
 .pipe(sourcemaps.init()) // creates a source map which would be very helpful for debugging by maintaining the actual source code structure
 .pipe(stream(webpackConfig)) // blend in the webpack config into the source files
 .pipe(uglify())// minifies the code for better compression
 .pipe(sourcemaps.write())
 .pipe(gulp.dest(path.DEST_BUILD));
 });

7.2 Spinoff the webpack dev server task

 gulp.task("webpack-dev-server", function(callback) {
 // modify some webpack config options
 var myConfig = Object.create(webpackConfig);
 myConfig.devtool = "eval";
 myConfig.debug = true;

 // Start a webpack-dev-server
 new WebpackDevServer(webpack(myConfig), {
 publicPath: "/" + myConfig.output.publicPath,
 stats: {
 colors: true
 }
 }).listen(8080, "localhost", function(err) {
 if (err) throw new gutil.PluginError("webpack-dev-server", err);
 gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
 });
 });

7.3 Now let’s etup the watcher in Gulp which shall look for all changes in the statc resources and invoke the webpack instantly.

 gulp.task('watch', function() {
 gulp.watch(path.ALL, ['webpack']);
 });

7.4 Finally setup the default gulp task which starts the webpack dev server and initiates the watch

gulp.task('default', ['webpack-dev-server', 'watch']);

7.5 Now lets do a run

$ gulp
 [14:56:10] Using gulpfile ~/Desktop/MyAwesomeProject/Gulpfile.js
 [14:56:10] Starting 'webpack-dev-server'...
 [14:56:10] Starting 'watch'...
 [14:56:10] Finished 'watch' after 9.52 ms
 [14:56:10] [webpack-dev-server] http://localhost:8080/webpack-dev-server/index.html
 Hash: 154fd7d206186335ec46
 Version: webpack 1.10.5
 Time: 252ms
 Asset    Size  Chunks             Chunk Names
 build.min.js  281 kB       0  [emitted]  main
 chunk    {0} build.min.js (main) 248 kB [rendered]
 [0] ./src/app.js 374 bytes {0} [built]
 [1] ./~/jquery/dist/jquery.js 248 kB {0} [built]
 webpack: bundle is now VALID.

 

You can find the code explained above here:

https://github.com/nishantnisonko/gulp-webpack-devserver

 

References:

• http://gulpjs.com
• http://webpack.github.io