Noisy Pterodactyl Melodies

    This package has been deprecated

    Author message:

    renamed to zkflow-angular

    gulp-zkflow-angular

    1.1.1 • Public • Published

    Gulp Zkflow for AngularJS

    Automation for AngularJS projects powered by Gulp

    Made by Zaklinacze Kodu

    Shields

    npm npm npm
    Travis Code Climate
    David David
    GitHub forks GitHub stars GitHub followers

    Features

    • Sass + saasdoc + css globbing + autoprefixer

    • Browserify + ngannotate

    • Assets management

    • Bower

    • AngularJS templates embedded in js

    • E2E tests with protractor and cucumber

    • Development environment

      • Webserver with livereload
      • Watching files for changes and full, fast, incremental rebuilds
      • Unit tests with karma
      • jshint
      • jsbeautifier
    • Production environment

      • js, css, jpg, png and svg minification
      • cache busting
    • Continous integration

      • build + jshint + jsbeautifier + tests + e2e with guaranteed non-zero exit status on error

    Why not just write tasks yourself?

    Usually simple gulp tasks have a lot of problems, which are resolved in Zkflow

    • tasks immune to errors resulting crashed watchers
    • tasks parametrized with tasks modes
    • tasks cannot run few times simultaneously after few quick changes
    • in develop mode if task detect some errors it will hold execution until all errors will be corrected and then it will let the rest of dependent tasks run
    • tasks in prod mode always returns non-zero exit status on error

    Requirements

    You need:

    nodejs

    If you've never used Node or npm before, you'll need to install Node. If you use homebrew, do:

    brew install node

    Otherwise, you can download and install it manually.

    updated npm

    Update npm by running

    npm update npm -g

    node-gyp dependencies

    Node-gyp is used to compile native extensions to node. Zkflow does not require node-gyp directly, but it is installed by its dependencies. To install this dependencies properly you need to satisfy node-gyp requirements. Go to node-gyp github page and follow instructions in "You will also need to install" paragraph in README file (python etc.)

    Installation

    Gulp Zkflow for AngularJS is available through npm

    npm install --save gulp gulp-zkflow-angular

    Put this line in your gulpfile.js

    require('gulp-zkflow-angular').init();

    This will create a set of tasks in gulp, which you will be able to use from console

    Development flow

    How you can use ZKflow gulp tasks to work with Your AngularJS project

    write code and test

    Run in project root directory

    ./node_modules/.bin/gulp

    or

    ./node_modules/.bin/gulp default

    This task will

    • clean whole output dir (dev/)
    • bundle all your js with browserify and watch file changes with watchify
    • bundle all your styles with sass, css globbing and autoprefix
    • generate documentation with sassdoc if enabled
    • run jshint and rerun on any js file change
    • run tests with karma and browserify and watch file changes with watchify
    • run bower install
    • bundle your angular templates into angular module (.tmp/templates.js) and rebundle on any template file change
    • copy your assets and copy any newly created asset since then
    • copy Your index.html and inject styles, scripts, angular main module name into it. Redo on index.html change.
    • start gulp-webserver with livereload
    • open Your default web browser with proper address.

    Write some code, enjoy the results

    write e2e tests

    Run in project root directory

    ./node_modules/.bin/gulp e2e

    This task will

    • clean whole output dir (test/)
    • same as in default task, but will try to start from test module (where you can put Your e2e mocks)
    • run protractor and rerun every time you press 'r'

    Write some tests

    beautify your code

    Run in project root directory

    ./node_modules/.bin/gulp beautify

    all your code will be automatically beatified with jsbeautifier

    check everything

    Run in project root directory

    ./node_modules/.bin/gulp ci

    This task will fail if

    • code isn't beautified
    • code isn't jshinted
    • any of karma tests will fail
    • any of protractor e2e tests will fail
    • build fail (sass, browserify)

    You definitly should add this task to your CI server. This task can be splitted into stages. ./node_modules/.bin/gulp ci is an equivalent for

    ./node_modules/.bin/gulp ci-static-analysis
    ./node_modules/.bin/gulp ci-test
    ./node_modules/.bin/gulp ci-build
    ./node_modules/.bin/gulp ci-e2e

    commit :D

    git commit -m 'awesome code'

    Production flow

    installing

    npm install

    building

    ./node_modules/.bin/gulp build

    This task will

    • clean whole output dir (dist/)
    • bundle all your js with browserify and minify with uglifyjs
    • bundle all your styles with sass, css globbing, autoprefix and minify with csso
    • generate documentation with sassdoc if enabled
    • run bower install
    • bundle your angular templates into angular module (.tmp/templates.js) and minify with htmlminify
    • copy your assets and minify all .png/.jpg/.gif/.svg
    • copy Your index.html, htmlminify and inject styles, scripts, angular main module name into it.
    • Do cache busting

    Apache/Nginx

    Point it to ./dist directory, and configure your server to fallback to index.html if file not found (to work with router html5 mode)

    Directory structure

    • dist/ - build output
    • dev/ - dev output
    • test/ - e2e output

    Files

    .gitignore

    You should probably add this entries in .gitignore file

    bower_components/
    npm-debug.log
    node_modules/
    .tmp/
    dist/
    dev/
    test/
    reports/
    docs/
    

    src/index.html

    <!DOCTYPE html>
    <html ng-app="<%= angularMainModuleName %>" lang="en">
     
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
     
    <body ng-controller="appNameController">
     
      <!-- inject:js -->
      <!-- endinject -->
    </body>
     
    </html>

    src/index.js

    'use strict';
     
    var angular = require('angular');
     
    angular.module('app', [
        require('../.tmp/templates.js').name
      ])
      .controller('appNameController', /** @ngInject */ function() {
      });

    API

    If you get 'task not found' error from gulp, you probably should pass gulp to init

    require('gulp-zkflow-angular').init(undefined, undefined, require('gulp'));

    options

    You can pass options object to init function

    require('gulp-zkflow-angular').init(options, outputDirsMap);

    For every task options are merged only 1 level deep. Deeper they will be overwritten.

    For example if you have default options

    {
      someTask: {
          option1: 1
          option2: 2
          option3: {
              subOption1: 3
              subOption2: 4
          }
      }
    }

    and you pass to init

    {
      someTask: {
          option1: 11
          option3: {
              subOption1: 5
          }
      }
    }

    actual task options are

    {
      someTask: {
          option1: 11
          option2: 2
          option3: {
              subOption1: 5
          }
      }
    }

    Default options

    We recommend using as much default options as possible. They are based on our experience with AngularJS and they set up some solid structure for your project.

    {
      assets: {
        task: require('gulp-zkflow-angular/src/tasks/assets'),
        enabled: true,
        dependencies: [],
        globs: 'src/**/_assets/**',
        globsOptions: {
          base: 'src/'
        },
        imagemin: undefined //options for gulp-imagemin
      },
      beautify: {
        task: require('gulp-zkflow-angular/src/tasks/beautify')
        enabled: true,
        dependencies: [],
        globs: [
          'src/*.js',
          'src/**/*.js',
          'src/*.html',
          'src/**/*.html',
          'gulp/*.js',
          'gulp/**/*.js',
          'gulpfile.js'
        ],
        globsOptions: {
          base: './'
        }
      },
      bower: {
        task: require('gulp-zkflow-angular/src/tasks/bower')
        enabled: true,
        dependencies: [],
        globs: 'bower_components/**',
        globsOptions: {
          base: './'
        },
        outputDirSuffix: ''
      },
      clean: {
        task: require('gulp-zkflow-angular/src/tasks/clean')
        enabled: true,
        dependencies: []
      },  
      jshint: {
        task: require('gulp-zkflow-angular/src/tasks/jshint')
        enabled: true,
        dependencies: [],
        globs: [
          'gulpfile.js',
          'gulp/*.js',
          'gulp/**/*.js',
          'src/*.js',
          'src/**/*.js'
        ],
        globsOptions: undefined,
        jshintrc: false
      },
      templates: {
        task: require('gulp-zkflow-angular/src/tasks/templates')
        enabled: true,
        dependencies: [],
        globs: [
          'src/**/_templates/*.html',
          'src/**/_templates/**/*.html'
        ],
        globsOptions: undefined,
        minifyHtml: {
          empty: true,
          spare: true,
          quotes: true
        },
        templateCache: {
          standalone: true,
          module: 'zk.templates',
          root: '/',
          moduleSystem: 'browserify',
          templateFooter: '}]).name;'
        },
        templateModuleFileName: 'templates.js',
        outputDir: '.tmp/'
      },
      'webdriver-update': {
        task: require('gulp-zkflow-angular/src/tasks/webdriverUpdate')
        enabled: true,
        dependencies: [],
        webdriverUpdate: undefined
      },  
      webserver: {
        task: require('gulp-zkflow-angular/src/tasks/webserver')
        enabled: true,
        dependencies: [],
        host: 'localhost',
        docsGlobs: 'docs/',
        docsWebserver: {
          livereload: {
            enable: true,
            port: 35730
          },
          directoryListing: {
            enable: true,
            path: 'docs/'
          },
          open: true,
          port: 8010
        }
      },
      assemble: {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          'clean', ['inject', 'assets']
        ],
        mode: undefined
      },
      build: {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          'assemble'
        ],
         mode: {
           env: 'prod',
           watch: false
         }
      },
      ci: {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          'ci-static-analysis',
          'ci-test',
          'ci-build',
          'ci-e2e'
        ],
        mode: undefined
      },
      'ci-build': {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          ['assemble']
        ],
        mode: {
          env: 'prod',
          watch: false
        }
      },
      'ci-e2e': {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          ['e2e']
        ],
        mode: {
          env: 'test',
          watch: false
        }
      },
      'ci-static-analysis': {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          ['beautify', 'jshint']
        ],
        mode: {
          env: 'prod',
          watch: false
        }
      },
      'ci-test': {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          ['test']
        ],
        mode: {
          env: 'prod',
          watch: false
        }
      },
      css: {
        task: require('gulp-zkflow-angular/src/tasks/css'),
        enabled: true,
        dependencies: ['bower']
        globs: [
          'src/index.scss',
          'src/**/_styles/*.{scss,sass}',
          'src/**/_styles/**/*.{scss,sass}'
        ],
        globsOptions: undefined,
        outputDirSuffix: '',
        cssGlobbing: {
          extensions: ['.sass', '.scss'],
          scssImportPath: {
            leading_underscore: false,
            filename_extension: false
          }
        },
        autoprefixer: {
          browsers: ['last 2 versions', 'ie 9'],
          cascade: false
        },
        sass: undefined,
        sourcemapsInit: undefined,
        sourcemapsWrite: undefined,
        cssoStructureMinimization: undefined,
        sassdoc: {
          dest: 'docs/sass/'
        }
      },
      default: {
        task: require('gulp-zkflow-angular/src/tasks/sequence'),
        enabled: true,
        dependencies: [],
        sequence: [
          'clean', ['inject', 'assets', 'jshint', 'test'],
          'webserver'
        ],
        mode: undefined
      },
      e2e: {
        task: require('gulp-zkflow-angular/src/tasks/protractor'),
        enabled: true,
        dependencies: ['webdriver-update', 'assemble'],
        globs: [
          'e2e/features/*.feature',
          'e2e/features/**/*.feature'
        ],
        globsOptions: undefined
        customConfigFiles: false,
        configFile: 'protractor.conf.js',
        watchConfigFile: 'protractor.watch.conf.js'
      },
      inject: {
        task: require('gulp-zkflow-angular/src/tasks/inject'),
        enabled: true,
        dependencies: ['js', 'css'],
        globs: 'src/index.html',
        globsOptions: undefined
        injectablesGlobs: [
          'index*.js',
          'index*.css'
        ],
        injectablesGlobsOptions: {
          read: false
        },
        headInjectablesGlobs: undefined,
        absolute: true,
        prodAngularMainModuleName: 'app',
        devAngularMainModuleName: 'appDev',
        testAngularMainModuleName: 'appTest',
        minifyHtml: {
          empty: true,
          spare: true,
          quotes: true
        }
      },
      js: {
        task: require('gulp-zkflow-angular/src/tasks/js'),
        enabled: true,
        dependencies: ['bower', 'templates'],
        devEntries: 'src/dev/index.js',
        prodEntries: 'src/index.js',
        testEntries: 'src/test/index.js',
        uglify: undefined,
        browserifyTransforms: [
          require('browserify-ngannotate')
        ]
      },
      test: {
        task: require('gulp-zkflow-angular/src/tasks/test'),
        enabled: true,
        dependencies: ['bower', 'templates'],
        files: [
          'src/*Spec.js',
          'src/**/*Spec.js'
        ],
        reportsBaseDir: 'reports/test/',
        junitReporterOutputDir: 'junit/',
        htmlReporterOutputDir: 'html/',
        istanbulIgnore: [
          '**/node_modules/**',
          '**/bower_components/**',
          '*Spec.js',
          '**/*Spec.js'
        ],
        istanbulReporters: [{
          type: 'html',
          subdir: 'coverageHtml'
        }, {
          type: 'clover',
          subdir: 'coverageClover'
        }],
        browserifyTransforms: []
      }
    }

    output dirs map

    You can pass output dirs map object to init function. This object maps current environment to output dir.

    require('gulp-zkflow-angular').init(options, outputDirsMap);

    Default output dirs map

    {
      prod: 'dist/',
      test: 'test/',
      dev: 'dev/'
    }
    

    mode

    You can retrieve mode object from zkflow

    var mode = require('gulp-zkflow-angular').mode;

    This object is shared across all tasks and it define mode of operation.

    Default mode

    {
      env: 'dev',
      watch: true,
      angularMainModuleProdFallback: false
    }

    Some of the mode properties can be changed on run by environment variables

    ZKFLOW_ENV=prod ZKFLOW_WATCH=false ./node_modules/.bin/gulp css

    which is equivalent to

    bamboo_ZKFLOW_ENV=prod bamboo_ZKFLOW_WATCH=false ./node_modules/.bin/gulp css

    Some tasks overwrites mode

    Install

    npm i gulp-zkflow-angular

    DownloadsWeekly Downloads

    38

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • bolo