gulp

@TallyB

npm install -g yo gulp bower 

npm install -g generator-gulp-angular 

-- Make a new directory, and cd into it

yo gulp-angular [app-name]

The Menu

-- WHY? 

 

-- WHAT? 

 

-- HOW?

 

-- Goodies

WHY? 
WHAT? 
How? 

Development

 

Styles (SASS, LESS)

Compile (coffee, ES2015)

Lint

Inject

Watch

Tests

Live Reload

Build

 

HTML2JS

Dependencies

Compact

Minify

Image min

Deploy

OH My god, 

they are using

humans to do

robots' job

WHY? 
WHAT? 
How? 

Task Builder

Task Automation

Build Tool

grunt.js
gulp.js

  • Stream

  • Code

  • File

  • Configuration


Streams
 

dir > a.txt

ps aux | grep conky | grep -v grep | awk '{print $2}' | xargs kill

File vs Stream

.tmp

configuration vs code

    watch: {
      injectJS: {
        files: [
          '<%= yeoman.client %>/{app,components}/**/*.js',
          '!<%= yeoman.client %>/{app,components}/**/*.spec.js',
          '!<%= yeoman.client %>/{app,components}/**/*.mock.js',
          '!<%= yeoman.client %>/app/server.js'],
        tasks: ['injector:scripts']
      },
      injectCss: {
        files: [
          '<%= yeoman.client %>/{app,components}/**/*.css'
        ],
        tasks: ['injector:css']
      },
gulp.task('scripts', function () {
  var partials = gulp.src('client/app/**/*.html')
    .pipe(angularTemplatecache({
      root: 'app',
      module: 'morffy'
    }));


  var app = gulp.src('dist/client/app.js');

  return sq({ objectMode: true }, app, partials)
    .pipe(concat('app.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(gulp.dest('dist/client/'));
});

WHY? 
WHAT? 
How?  

gulp.src ()
gulp.dest()
gulp.pipe ()
gulp.task()
gulp.watch()
gulp.task(name[, deps], fn)
var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // Do stuff
});

Task

gulp.src(globs[, options])
[
  'client/app',
  'client/app/**/*.html',
  'client/app/**/*.js',
  '!client/app/**/*.scss',
  '!client/app/**/*.spec.js',
  '!client/app/**/*.e2e.js'
]
gulp.dest(path[, options])

SRC, DEST

gulp.watch(glob[, opts], tasks)
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.watch(glob[, opts, cb])

WATCH

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/boewr-components/**/*.coffee'],
  images: 'client/img/**/*'
};

gulp.task('clean', function(done) {
  del(['build'], done);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

Plugins

-concat

-uglify

-Inject

-CSSMIN

-GIT

-BUMP

700 More..

Angular Plugins

-NG-HTML2JS

Main-bower-files

-NGDOCS

-ng-annotate

-NG-config

-NG-ANGULAR-TemplateCache

-ANGular-Filesort

Error Handling

module.exports = function () {
  return gulp.src('client/app/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest('client/app'));
};

Plumber

ON Error

var util = require ('gulp-util'); 

module.exports = function () {
  return gulp.src('client/app/**/*.scss')
    .pipe(sass())
    .on('error', util.log)
    .pipe(gulp.dest('client/app'));
};

GOODIES

Browser-sync

// In tasks

  gulp.watch([
    styles
  ], function () {
    gulp.src(styles)
      .pipe(plumber())
      .pipe(sass())
      .pipe(gulp.dest('client/app'))
      .pipe(bsync.reload({ stream: true }));
  });
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

RIPE

// node server

server.listen(config.port, config.ip, function () {

  console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));

  // notify the gulp task that the server is ready so bsync can start
  if (config.env === 'development') {
    require('ripe').ready();
  }
});
// in gulp server run

nodemon: function (cb) {
    return nodemon({
        script: 'server/server.js',
        ext: 'js',
      })
      .on('start', function () {
          ripe.wait(function () {
            bsync.reload({ stream: false });
          });
      });
  }
https://github.com/42Zavattas/generator-bangular

BANGULAR

MEAN full stack

https://github.com/thaiat/generator-angular-famous-ionic

Angular-Famous-Ionic

Mobile full stack

<div>Icons made by <a href="http://www.flaticon.com/authors/anton-saputro" title="Anton Saputro">Anton Saputro</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a>             is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></div>

Cheers

Gulp - NGIL11

By Tally Barak

Made with Slides.com

Gulp - NGIL11

  • 1,589

More from Tally Barak