Gulp & Gulp plugins

Install Gulp

Use the following command to install gulp :

  • npm install -g gulp
  • npm install –save-dev gulp
  • To test the installation use following command:
    • gulp -v
  • Gulp is the streaming build system. It is recommended to install it globally as it can be required on multiple projects.

Install Gulp Plugins

Use the following command to install gulp plugins:

  • npm install gulp-sass gulp-concat gulp-uglify gulp-jshint gulp-rename –save-dev
  • Above command will install gulp plugins listed in the command. Sass, Concat, Uglify, jsHint & rename will be installed.

Screen Shot 2016-07-10 at 12.24.32 AM


Gulpfile.js

This file is the main file which is referred by Gulp to configure the application. It is made up of three sections:

  1. Gulp core and Gulp plugins declaration
  2. Task definition
  3. Task application

 

Gulp core and Gulp plugins declaration

In this step you will declare gulp and various plugins which are needed for the application.

var gulp = require(‘gulp’);

var concat = require(‘gulp-concat’);
var sass = require(‘gulp-sass’);
var jshint = require(‘gulp-jshint’);
var rename = require(‘gulp-rename’);
var uglify = require(‘gulp-uglify’);

Task definition

Here you’ll define the tasks required to output the deployment code.

gulp.task(‘sass’, function(){
return gulp.src(‘scss/*.scss’)
.pipe(sass())
.pipe(gulp.dest(‘dist/css’))
});

gulp.task(‘lint’, function(){
return gulp.src(‘js/*.js’)
.pipe(jshint())
.pipe(jshint.reporter(‘default’))
});

gulp.task(‘scripts’, function() {
return gulp.src(‘js/*.js’)
.pipe(concat(‘all.js’))
.pipe(gulp.dest(‘dist’))
.pipe(rename(‘all.min.js’))
.pipe(uglify())
.pipe(gulp.dest(‘dist/js’));
});

gulp.task(‘watch’, function() {
gulp.watch(‘js/*.js’, [‘lint’, ‘scripts’]);
gulp.watch(‘scss/*.scss’, [‘sass’]);
});

Task application

Now that we have declared and defined everything, it is time to put those tasks into use.

gulp.task(‘default’, [‘watch’, ‘lint’, ‘sass’, ‘scripts’]);

Running the application

Use the following command to run the application:

  • gulp
  • This command will do the following:
    • Lint the JS files under js folder, concatenate them and minify them in one all.min.js under dist/js folder.
    • Compile the SCSS files into corresponding css file and place them under dist/css folder.
    • Keep a watch on JS and SCSS files for any updates.
  • The destination paths and order of tasks is configurable and flexible as per user’s choice.

Screen Shot 2016-07-10 at 12.13.30 PM

npm install [node_modules]

Checking node and npm installation

Use the following command to test if npm & node is installed:

  • node –version or node -v
  • npm –version or npm -v

Refer to this POST in case node or npm is not installed.


Initializing a node project

  • npm init
  • This will initialize node programming on current folder and will create a package.json file. Package.json will contain the list of dependencies required for application development.

Installing node pakage using npm

Use the following command to install a node package:

  • npm install [package_name]
    • This will install the specified package into the local node_modules folder.
    • Ex: npm install bower
    • Parameters:
      • -g or –global: This installs the package as a global package.
        • Ex: npm install -g gulp
      • -S, –save: Package will appear in your dependencies.
        • Ex: npm install –save gulp
      • -D, –save-dev: Package will appear in your devDependencies.
        • Ex: npm install –save-dev gulp
      • -O, –save-optional: Package will appear in your optionalDependencies.
        • Ex: npm install -save-optional gulp
      • -E, –save-exact: Saved dependencies will be configured with an exact version rather than using npm’s default semver range operator.
  • npm install
    • This will install all modules listed as dependencies in package.json.

Gulpgulp-error

Use the following command to install gulp:

  • npm install -g gulp
  • Gulp is the streaming build system. It is recommended to install it globally as it can be required on multiple projects.

Bowerbower-logo

Use the following command to install gulp:

  • npm install -g bower
  • Bower is a package manager for the web. It is recommended to install it globally as it can be required on multiple projects.

express_jsExpress

Use the following command to install express:

  • npm install express
  • npm install express-generator -g
  • Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Lodashlogo202

Use the following command to install lodash:

  • npm i –save lodash
  • A modern JavaScript utility library delivering modularity, performance, & extras. Lodash makes JavaScript easier by taking the hassle out of working with arrays,
    numbers, objects, strings, etc.

angularjs

Use the following command to install angularjs:

  • npm install angular
  • Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is recommended to install it locally as it is required on the production code.

Many more libraries can be added from NPMJS site.

Refer to npm-install page for more details.