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
- A task manager with commonly used build tasks
- A development server which is spinned off once you start development
- 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
Thanks, please feel free to comment if you want to improve this article
Thanks
Thanks Nishant for the article. It is very enlightening.Keep sharing more such articles.
A very well explained blog.. this is the kind of doc i was searching for.. thanks for sharing
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
Add a script tag with the bundled file into your index.html file and fire it. Alternative- you can also use HTMLWebpack plugin to do that automatically for you immediately after creating the bundled file.
Great article. gulp-concat is not being used here even though it’s installed as a dev dependency. So, what’s the point of installing it in the first place? Thanks.