Notes about bundlers. Basic desciption and usage of Node.js, Gulp and Webpack.

bundlers.md

Bundlers

Notes about bundlers. Basic desciption and usage of Node.js, Gulp and Webpack.

Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

— nodejs.org

Instalation

Windows & MacOS

Just download from official site and run installer.

Linux

Bild from source 🙂

Or, an easier way, install via package manager

What's included

Binaries

• node — run Node.js from command line
• npm — Node Package Manager, more: npmjs.com

Node

Check version of currently installed Node, or check is Node actually installed:

node -v

package.json

package.json is the file that describes npm package, its name, scripts, dependencies, etc.

To create your package.json in an easy way run:

npm init

Typical structure of package.json file:

{
  "name": "my_package",
  "description": "My awesome package, or any you want to write",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "Viktor Yakubiv",
  "license": "MIT",
  "dependencies": {

  },
  "devDependencies": {

  }
}

Packages instalation

To install a package just run:

npm install <package_name>

or even shorter:

npm i <package_name>

To install package globally add flag --global:

npm install --global <package_name>

or -g:

npm install -g <package_name>

Dependencies and dev-dependencies

You may want to have some packages installed automatically with your package. It's called dependency.

To add a dependency, run following:

npm install --save <package_name>

After the execution you will in the package.json file following section:

{
  "dependencies": {
    "package_name": "^1.2.0"
  }
}

---

Sometimes you may want to have some packages for development mode only. There is devDependencies for it.

To install packages as devDependency run:

npm install --save-dev <package_name>

After the execution you will see section devDependencies in the package.json:

{
  "devDependencies": {
    "package_name": "^1.2.0"
  }
}

Useful links

• How to install local packages
• How to install global packages
• Working with package.json
• package.json documentation

Gulp

Task runner. Automates your routine with a few strings of code.

Instalation

Latest release, v3.9.1:

npm install --save-dev gulp

New version, currently in beta:

npm install --save-dev gulp@next

What is task

Task is any job you want to delegate to task runner.

It may be styles minification, concatenation, conversion form preprocessor's code, even pushing code to remote repository or uploading website via FTP.

Anything you know how to automate and have clear algorithm to do it can be defined as a task.

To define tasks Gulp has a bunch of methods, one from which is gulp.task().

API

The following methods are common and working in current legacy version of Gulp.

• gulp.task() — defines a task
• gulp.src() — read files from filesystem to stream
• gulp.dest() — writes files to filesystem
• gulp.watch() — looks for changes of files

The ones below are implemented in the new version to replace run-sequence.

• gulp.series() — runs tasks in sequence
• gulp.parallel() — runs tasks in parallel

Defining tasks

To define task use gulp.task() in format one of following:

gulp.task('taskName', () => {
  return gulp.src('**/*')
    .pipe(gulp.dest('dist'));
});

gulp.task(funtion taskName() {
  return gulp.src('**/*')
    .pipe(gulp.dest('dist'));
});

Gulpfile

var gulp = require('gulp');
var less = require('gulp-less');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cleanCSS = require('gulp-clean-css');

var paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};


/*
 * Define our tasks using plain functions
 */
function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}

function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

function watch() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}

/*
 * Specify if tasks run in series or parallel using `gulp.series`
 * and `gulp.parallel`
 */
var build = gulp.series(clean, gulp.parallel(styles, scripts));

/*
 * Use `gulp.task` to expose tasks
 */
gulp.task('build', build);

/*
 * Define default task that can be called by just running `gulp` from cli
 */
gulp.task('default', build);

Useful links

• Official website
• Repository
• Awesome Gulp — list of awesome Gulp plugins, articles etc.