Setting up your local dev environment with Gulp and Webpack

Unknown-2

 

Unknown

 

 

 

 

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. Unknown-1

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
Posted in Architecture, Design Pattern, Generic, Web Technology Tagged with: , , , , , , ,
5 comments on “Setting up your local dev environment with Gulp and Webpack
  1. Nishant Nishanko says:

    Thanks, please feel free to comment if you want to improve this article

  2. Nishant Nishanko says:

    Thanks

  3. Thanks Nishant for the article. It is very enlightening.Keep sharing more such articles.

  4. Payal says:

    A very well explained blog.. this is the kind of doc i was searching for.. thanks for sharing

  5. Dhruv says:

    Hey,
    im new to angular 2.
    i need to know what to do after the final step.
    It says webpack: bundle is now VALID.
    what should i do after that?
    when i run index.html it shows

1 Pings/Trackbacks for "Setting up your local dev environment with Gulp and Webpack"
  1. […] Setup the Gulpfile to define webpack and gulp tasks To understand the gulp/webpack configuration in detail read this: […]

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news