doomjs

# 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](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) integration - Mail inliner - Project tasks customization - Wraith manager - Context manager ![alt=doom](https://raw.github.com/codezilla-it/doom/master/doom.jpg) ```bash 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 ```bash which node which npm ``` if are not installed, install it with brew or similar ```bash brew install node ``` And verify that gulp and bower are installed globally ```bash $ sudo npm install -g gulp bower ``` Then you can install doom through npm ```bash $ sudo npm install -g doom ``` Or through github (you must add the doom and doom/task path to your NODE_PATH) ```bash $ git clone git@github.com:codezilla-it/doom.git ``` ## Set Global Gulp You must add to your .bashrc or .zshenv the global node_modules path ``` bash export NODE_PATH=/path/to/node_modules/ ``` ## Usage To use: Create a bower.json into your project root ```json { "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 ```bash $ gulp install ``` Then create a gulpfile.js at the same level ```javascript // --------------------------------------------- // 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 ``` bash $ npm install npm-check-updates -g ``` and then you can update all modules version running ``` bash $ ncu $ npm update -a ``` Now you must simpy include css and js dist into your base template ``` html <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 ``` bash 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. ``` bash 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) ``` bash 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 ``` bash gulp prod ``` ### serve When you run this task, it will watch your project for changes. To use this you have to install livereload. ``` bash 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 ``` bash gulp mail ``` ## Flags ### Wraith Manager Create wraith application dist into specific wraith : ``` bash gulp dev -wraith_name ``` Create wraith application dist into all wraiths and core dir: ``` bash gulp dev -all ``` ## License This project is released under the MIT license.