Angular JS Build & deploy using gulp


Below are the steps to build and deploy AngularJs application using gulp :
Prerequisites :
 a) Install Nodejs 6.9.3
 b) check you npm version using "npm -v" in the command prompt
 c) Install gulp using "npm install -g gulp"
 d) Set your environment  variables for windows.
Steps to create a gulp file :
1) create gulp file "gulpfile.js" in your project directory.
2) At the start of the file add below code snippet :

 var
 gulp = require("gulp"),
 sequence = require('gulp-sequence'),
 concat = require("gulp-concat"),
 uglify = require('gulp-uglify'),
 sass = require("gulp-sass"),
 css = require('gulp-minify-css'),
 zip = require('gulp-zip'),
 del = require('del'),
 sftp = require('gulp-sftp');
 var inject = require('gulp-inject');
 var injects = require('gulp-inject-string');
 var replace = require('gulp-string-replace');
 var hash = require('gulp-hash-filename');

3) Install all the above packages using the command in your project directory "npm install "package_name""

4) Add the below task for minification of CSS files into one file :

      gulp.task("styles", function() {
        return gulp
          .src("YOUR_CSS_FILE_PATH")
          .pipe(concat("styles.css"))
          .pipe(hash({
              "format": "{name}_{size}.css"
             }))
          .pipe(css())
          .pipe(gulp.dest("PATH_FOR_BUILD"));
      });

To add all the CSS files from a particular path :

       gulp.task("styles", function() {
          return gulp
            .src("YOUR_CSS_FILE_PATH/*.css")
            .pipe(concat("styles.css"))
            .pipe(hash({
                    "format": "{name}_{size}.css"
                }))
             .pipe(css())
            .pipe(gulp.dest(".PATH_FOR_BUILD"));
        });

5) Add below task for minification of JS scripts :

 a) Below task will concat(merge) all the included js file in ".SRC"  into one file

   gulp.task("js", function() {
     return gulp
       .src([
              "./dev/libs/angular/angular.1.4.5.min.js",
              "./dev/libs/angular/angular-animate.1.4.5.min.js"
         ])
         .pipe(concat("scripts.js"))
         .pipe(hash({
                 "format": "{name}_{size}.js"
           }))
         .pipe(gulp.dest("PATH_FOR_BUILD"));         
    });

b) Below task will minify the concated file by removing spaces and comments to make the file in the compressed form :

    gulp.task('uglify', function() {
        return gulp.src("PATH_FOR_BUILD")
            .pipe(uglify({ mangle: false }))
            .pipe(gulp.dest("PATH_FOR_BUILD"));
    });

6) Now to zip the folder with minified files :

 gulp.task('zip', function() {
        return gulp
         .src(['FILE_PATH_TOP_COPY', { base: "." })
         .pipe(zip('project.zip'))
         .pipe(gulp.dest("PATH_FOR_BUILD"));
    });

7) FTP the zip file to server for deployment :

    gulp.task('ftpweb', function () {
    return gulp.src('ZIP_FILE_PATH')
        .pipe(sftp({
            host: 'YOUR_HOST_NAME',
            user: 'USER_NAME',
            pass: 'PASSWORD',
            remotePath: 'SERVER_PATH_TO_COPY_FILES'
        }));
    });