edm-supergulp

This plugins aims to provide a standardized build process to our repos

Folder Structure

project
│   .editorConfig
│   .gitignore
|   .jscsrc
|   .jshintrc
|   gulpfile.js
|   package.json
│   README.md
│
└───src
│   │   components.js
│   │   config-dev.json
│   │   config-staging.json
│   │   config-prod.json
│   │   index.html
│   │   main.js
│   │   main.scss
│   │
│   └───component1
│   |   │   component1.css
│   |   │   template.html
│   |   │   vm.js
│   |   │   core.js
│   │
│   └───component2
│       │   component2.css
│       │   template.html
│       │   vm.js
│       │   core.js
│   
└───examples
|  │   example.html
|  │   main.js
│   
└───spec
│   
└───staticServer
|  │   staticServer.js
│   
└───dist
|  │   edmPluginConfig.js
|  │   index.html
|  │   main.js
|  │   superpreview.css
│   
└───coverage

Default tasks

The supergulp module, given the proper folder structure generates the following by default (you can also extend the generated files via config)

src/index.html        -> ejs        -> dist/index.html  
src/main.js           -> browserify -> dist/main.js  
src/main.scss         -> sass       -> dist/[package.json.name].[min.]css  // This means, that the default name will be tha name provided in the package.json file + ".css", eg. superpreview.css
examples/example.html -> ejs        -> dist/examples/example.html  
examples/main.js      -> browserify -> dist/examples/main.js  
localDeps             -> copy       -> dist/lib/  

Staticserver

The staticServer publishes only the dist folder

EXAMPLE GULP FILE

var gulp = require("gulp");
var createSuperGulp = require("edm-supergulp");
 
var superGulp = createSuperGulp({
    gulp: gulp
});
 
var packageJson = require("./package.json");
 
var resourceConfigs = {
    dev: __dirname + "/src/config-superpreview-dev.json",
    staging: __dirname + "/src/config-superpreview-staging.json",
    prod: __dirname + "/src/config-superpreview-prod.json"
};
 
var jsFiles = [
    "./*.js",
    "./src/*.js",
    "./src/**/*.js",
    "./spec/*.js",
    "./spec/**/*.js",
    "./examples/*.js"
];
 
var jsonFiles = [
    ".jshintrc",
    ".jscsrc",
    "./package.json",
    "./src/*.json",
    "./src/**/*.json",
    "./spec/*.json",
    "./spec/**/*.json",
    "./examples/*.json"
];
 
var specFiles = [
    "spec/**/*Spec.js"
];
 
var sourceFiles = [
    "src/**/*.js"
];
 
var localDeps = [
    "./node_modules/knob-js/dist/knob.js",
    "./node_modules/knob-js/dist/knob.min.css",
    "./node_modules/normalize.css/normalize.css",
    "./node_modules/knockout/build/output/knockout-latest.debug.js",
];
 
var deps = [
    "./src/public/img/ipad-white-portrait-final2.png",
    "./src/public/img/iphone5s-white-portrait-final2.png",
    "./src/public/img/macbookpro-final2.png",
    "./src/public/img/macbookpro-final2b.png"
];
 
var deployFiles = [
    "./dist/*",
    "./dist/**/*",
    "!./dist/examples",
    "!./dist/lib",
];
 
superGulp.taskTemplates.initPluginTasks({
    packageJson: packageJson,
    resourceConfigs: resourceConfigs,
    deployPath: "preview/" + packageJson.version + "/",
    files: {
        js: jsFiles,
        json: jsonFiles,
        spec: specFiles,
        source: sourceFiles,
        deploy: deployFiles,
        localDeps: localDeps
    },
    tasks: {
        copy: [
            { files: deps, dest: "./dist/img"}
        ],
        ejs: {},
        sass: []
    }
});
 

// USE 'gulp --tasks' TO GENERATE A DEPENDENCY TREE FROM AVAILABLE GULP TASKS!