Doom

A bunch of useful configurable Gulp tasks global to many projects, to manage development and production tasks with ease.

• Asset pipeline for SASS, JavaScript, images, and HTML that does compilation with souremaps and syntax checking in development mode and minification for production mode
• Advanced Bower integration
• Watch changed files with LiveReload integration
• Mail inliner
• Project tasks customization
• Wraith manager
• Context manager

 gulp
 Using gulpfile ~/path/to/gulpfile.js
 Starting 'default'...
 
Main Tasks
------------------------------
    default
    dev
    ls
    prod
    serve
    vendor

Sub Tasks
------------------------------
    bower:manager
    clean:bower.cache
    clean:npm.cache
    create:app.fonts
    create:app.images
    create:app.scripts
    create:app.styles
    create:bower.fonts
    create:bower.images
    create:bower.scripts
    create:bower.styles
    delete:app.fonts
    delete:app.images
    delete:app.scripts
    delete:app.styles
    delete:bower.fonts
    delete:bower.images
    delete:bower.install
    delete:bower.scripts
    delete:bower.styles
    delete:dist
    update:bower
    update:dependecies
    update:npm

[15:35:46] Finished 'ls' after 1.16 ms
[15:35:46] Starting 'default'...

Wraiths
------------------------------
    -all
    -wraith-name

Get Started

Before get started with doom, verify that you have installed node with npm

which node
which npm

if are not installed, install it with brew or similar

brew install node

And verify that gulp and bower are installed globally

$ sudo npm install -g gulp bower

Then you can install doom through npm

$ sudo npm install -g doom

Or through github (you must add the doom and doom/task path to your NODE_PATH)

$ git clone [email protected]:codezilla-it/doom.git

Set Global Gulp

You must add to your .bashrc or .zshenv the global node_modules path

export NODE_PATH=/path/to/node_modules/

Usage

To use:

Create a bower.json into your project root

{
  "name": "project-name",
  "version": "1.0.0",
  "authors": [
    "Name-1",
    "Name-2"
  ],
  "description": "",
  "main": "",
  "moduleType": [
    "amd"
  ],
  "keywords": [
    "word-1",
    "word-2"
  ],
  "license": "MIT",
  "homepage": "http://project-name.com",
  "private": true,
  "ignore": [
    "**/.*",
    "*.map",
    "*.json",
    "*.md",
    "*.editorconfig",
    "*.yml",
    "bower_components",
    "node_modules",
    "media",
    "test",
    "tests"
  ],
  "dependencies": {
    "plugin-1": "~number-version",
    "plugin-2": "~number-version"
  },
  "devDependencies": {},
  "resolutions": {
    "shim-plugin-1": "~number-version",
    "shim-plugin-2": "~number-version"
  },
  "install": {
    "base": "path/to/static",
    "path": "name_vendor_folder",
    "sources": {
      "plugin-1": [
        "bower_components/path/to/plugin-1.js",
        "bower_components/path/to/plugin-1.css",
        "bower_components/path/to/fonts/*.**",
        "bower_components/path/to/*.{gif,png,jpg,jpeg,svg}"
      ],
      "plugin-2": [
        "bower_components/path/to/plugin-2.js",
        "bower_components/path/to/plugin-2.css",
        "bower_components/path/to/fonts/*.**",
         "bower_components/path/to/*.{gif,png,jpg,jpeg,svg}"
      ]
    },
    "ignore": [
      "plugin-or-dependencies-to-ignore-1",
      "plugin-or-dependencies-to-ignore-2"
    ]
  }
}

Then run the gulp install that create the node_modules and bower_components dependencies

$ gulp install

Then create a gulpfile.js at the same level

// ---------------------------------------------
// gulpfile.js settings
// ---------------------------------------------
// Rather than manage one giant configuration file
// responsible for creating multiple tasks, each task
// has been broken out into its own file.
// To add a new task, simply add a new task
// in this configuration.
// ---------------------------------------------

var gulp = require('gulp');

// process objects
// ---------------------------------------------

var base = process.cwd();

process.wraith = {
    root: process.env.WRAITHS_PATH,
    paths: {
        halo: '/layouts/halo'
    },
    'context': {
        'common': '/common',
        'desktop': '/desktop',
        'tablet': '/tablet',
        'phone': '/phone'
    }
};

process.doom = {
    gulp: gulp,
    base: base,
    static: base + '/static',
    templates: base + '/templates/',
    core: '/layouts/_core',
    dist: '/_dist',
    proxy: 'site-name.ext',
    app: {
        name: 'app',
        styles: '/styles',
        scripts: '/scripts',
        images: '/images',
        fonts: '/fonts'
    },
    mail: {
        root: base + '/mail_system',
        dist: '/static/_dist',
        styles: '/static/styles',
        templates: {
            origin: '/templates/origin',
            inlined: '/templates/inlined'
        }
    },
    bower: {
        name: 'vendor',
        root: '/bower_components',
        static: '/vendor',
        order: [
            'plugin-name-1/*.js',
            'plugin-name-2/*.js',
            '**/*.js'
        ],
        include_paths: [
            process.wraith.root,
            base + '/bower_components/plugin-name-1',
            base + '/bower_components/plugin-name-2',
            base + '/bower_components/*'
        ],
        fonts: [
            '/font-awesome'
        ],
        images: []
    },
    serve: {
        styles: '/styles/**/*.{sass,scss}',
        scripts: '/scripts/**/*.js',
        markup: '/**/*.{html, phtml}',
        mail: {
            templates: '/templates/src/**/*.{html}',
            styles: '/styles/sass/**/*.{sass,scss}'
        },
        bower: '/**/*.*'
    }
};

require('doom');

For verify if node_modules need an update install npm-check

$ npm install npm-check-updates -g

and then you can update all modules version running

$ ncu
$ npm update -a

Now you must simpy include css and js dist into your base template

<link rel="stylesheet" href="path/to/static/{{ core }}/_dist/app.css">
<link rel="stylesheet" href="path/to/static/{{ wraith_name }}/_dist/app-{{ context }}.css">
<link rel="stylesheet" href="path/to/static/_dist/vendor.css">
...
<script src="path/to/static/_dist/vendor.js"></script>
<script src="path/to/static/{{ core }}/_dist/app.js"></script>
<script src="path/to/static/{{ wraith_name }}/_dist/app-{{ context }}"></script>

Tasks

default

Run this task to:

• print the tasks list

gulp

vendor

This task create a vendor folder into your static with your plugins (images, fonts, and various assets of your choice), then create two files vendor.js and vendor.css and exports those (including assets) to dist folder.

gulp vendor

dev

Run this task to:

• clean any already generated JS/CSS file
• compile your SASS files to one unified file (with sourcemaps enabled)

and, parallelly:

• compile your JS browserify files to one unified file (with sourcemaps enabled)

gulp dev

prod

Run this task to:

• clean any already generated JS/CSS file
• compile your SASS files to one unified file and minified CSS file removing sourcemaps

and, parallelly:

• compile your JS browserify files to one unified file and uglified JS file removing sourcemaps

gulp prod

serve

When you run this task, it will watch your project for changes. To use this you have to install livereload.

gulp serve

mail

Run this task to:

• clean any already generated inlined mail templates
• inline your CSS class to multiple html templates

and, parallelly:

• inject your responsive style after the inliner
• convert your responsive style after the inject into style tag

gulp mail

Flags

Wraith Manager

Create wraith application dist into specific wraith :

gulp dev -wraith_name

Create wraith application dist into all wraiths and core dir:

gulp dev -all

License

This project is released under the MIT license.