Skip to content
Permalink
Browse files

fix(prod build): fix the loading order of scripts and styles

  • Loading branch information
jyounce committed Jun 17, 2015
1 parent 171426f commit 6aad6b9067221edb45462d0367f4c16a370e204c
@@ -121,22 +121,16 @@ gulp rapid-build:prod

#### Prod Build:
1. run common tasks (see above)
2. concatenate application files
2. minify the application files
* css
* js
3. minify the application files
* css
* js
4. prepend libs to the application file
* css
* js
5. prepend bower components to the application file
3. concatenate files
* css (styles.min.css created)
* js (scripts.min.css created)
6. build the spa.html file
7. minify the spa.html file
8. minify server js files
9. start the server
4. build the spa.html file
5. minify the spa.html file
6. minify server js files
7. start the server

## Develop Rapidly!
![Shake and Bake!](docs/shake-and-bake.jpg)
@@ -2,14 +2,28 @@ module.exports = (config) ->
log = require "#{config.req.helpers}/log"
test = require("#{config.req.helpers}/test")()

# helpers
# =======
getLoadFiles = (type) -> # for prod file loading order (order matters)
first: "first.#{type}"
second: "second.#{type}"
third: "third.#{type}"
middle: "middle.#{type}"
last: "last.#{type}"

# defaults
# ========
loadScriptFiles = getLoadFiles 'js'
loadStylesFiles = getLoadFiles 'css'

# init fileName (used in config-temp.coffee)
# ==========================================
fileName =
scripts:
all: 'all.js'
load: loadScriptFiles
min: 'scripts.min.js'
styles:
all: 'all.css'
load: loadStylesFiles
min: 'styles.min.css'
views:
main: 'views.js'
@@ -68,9 +68,9 @@ module.exports = (config) ->

# dist
# ====
addGlob 'dist', 'bower', ['all']
addGlob 'dist', 'bower', ['all', 'css', 'js']
addGlob 'dist', 'images', ['all']
addGlob 'dist', 'libs', ['all']
addGlob 'dist', 'libs', ['all', 'css', 'js']
addGlob 'dist', 'scripts', ['all']
addGlob 'dist', 'scripts', ['js' ], true, true
addGlob 'dist', 'styles', ['all']
@@ -18,7 +18,7 @@ module.exports = (config, options) ->
libs: config.dist.rb.client.libs.dirName
scripts: getDirName 'rb', 'scripts'
styles: getDirName 'rb', 'styles'

rb.files =
rb: ["#{rb.scripts}/app"]
angular: [
@@ -1,37 +1,50 @@
# FOR THE PROD BUILD
# ==================
module.exports = (config) ->
path = require 'path'
log = require "#{config.req.helpers}/log"
test = require("#{config.req.helpers}/test")()

# constants
# =========
tDir = '.temp'
types = ['scripts', 'styles']
files = ['all', 'min']
tDir = '.temp'
glob = '/**/*'
types = ['scripts', 'styles']
rbAndApp = ['rb', 'app']

# init temp
# =========
temp = {}
temp.client = {}
temp.client.dir = path.join config.dist.app.client.dir, tDir
temp.client.dir = path.join config.dist.app.client.dir, tDir
temp.client.glob = path.join temp.client.dir, glob

# add types
# =========
addTypes = ->
for own k1, v1 of config.fileName
continue if types.indexOf(k1) is -1
temp.client[k1] = {}
temp.client[k1].dir =
path.join temp.client.dir,
config.dist.app.client[k1].dirName
temp.client[k1].dir = path.join temp.client.dir, config.dist.app.client[k1].dirName
temp.client[k1].glob = path.join temp.client[k1].dir, glob
for own k2, v2 of v1
continue if files.indexOf(k2) is -1
continue if k2 isnt 'min'
temp.client[k1][k2] = {}
temp.client[k1][k2].file = v2
temp.client[k1][k2].path =
path.join temp.client[k1].dir,
temp.client[k1][k2].file
temp.client[k1][k2].path = path.join temp.client[k1].dir, temp.client[k1][k2].file

addTypesRbAndApp = ->
for own k1, v1 of config.fileName
continue if types.indexOf(k1) is -1
rbAndApp.forEach (appOrRb) ->
typeDir = temp.client[k1].dir
temp.client[k1][appOrRb] = {}
temp.client[k1][appOrRb].dir = path.join typeDir, appOrRb

# build types (in order)
# ======================
addTypes()
addTypesRbAndApp()

# add temp to config
# ===================
@@ -5,71 +5,70 @@
module.exports = (gulp, config) ->
# browser
# =======
bs = require("#{config.req.tasks}/browser/browser-sync") gulp, config # browser-sync
require("#{config.req.tasks}/browser/open-browser") gulp, config # open-browser
bs = require("#{config.req.tasks}/browser/browser-sync") gulp, config # browser-sync
require("#{config.req.tasks}/browser/open-browser") gulp, config # open-browser

# build
# =====
require("#{config.req.tasks}/build/build-angular-modules") gulp, config # build-angular-modules
require("#{config.req.tasks}/build/build-bower-json") gulp, config # build-bower-json
require("#{config.req.tasks}/build/build-config") gulp, config # build-config
require("#{config.req.tasks}/build/build-files") gulp, config # build-files
require("#{config.req.tasks}/build/build-files-prod") gulp, config # build-files-prod
require("#{config.req.tasks}/build/build-spa") gulp, config # build-spa
require("#{config.req.tasks}/build/build-angular-modules") gulp, config # build-angular-modules
require("#{config.req.tasks}/build/build-bower-json") gulp, config # build-bower-json
require("#{config.req.tasks}/build/build-config") gulp, config # build-config
require("#{config.req.tasks}/build/build-files") gulp, config # build-files
require("#{config.req.tasks}/build/build-files-prod") gulp, config # build-files-prod
require("#{config.req.tasks}/build/build-spa") gulp, config # build-spa

# clean
# =====
require("#{config.req.tasks}/clean/clean-config") gulp, config # clean-config
require("#{config.req.tasks}/clean/clean-dist") gulp, config # clean-dist
require("#{config.req.tasks}/clean/clean-files") gulp, config # clean-files
require("#{config.req.tasks}/clean/cleanup-client") gulp, config # cleanup-client
require("#{config.req.tasks}/clean/clean-config") gulp, config # clean-config
require("#{config.req.tasks}/clean/clean-dist") gulp, config # clean-dist
require("#{config.req.tasks}/clean/clean-files") gulp, config # clean-files
require("#{config.req.tasks}/clean/cleanup-client") gulp, config # cleanup-client

# common
# =======
require("#{config.req.tasks}/common") gulp, config # common
require("#{config.req.tasks}/common") gulp, config # common

# compile
# =======
require("#{config.req.tasks}/compile/coffee") gulp, config # coffee
require("#{config.req.tasks}/compile/es6") gulp, config # es6
require("#{config.req.tasks}/compile/less") gulp, config # less
require("#{config.req.tasks}/compile/coffee") gulp, config # coffee
require("#{config.req.tasks}/compile/es6") gulp, config # es6
require("#{config.req.tasks}/compile/less") gulp, config # less

# copy
# ====
require("#{config.req.tasks}/copy/copy-bower_components") gulp, config # copy-bower_components
require("#{config.req.tasks}/copy/copy-css") gulp, config # copy-css
require("#{config.req.tasks}/copy/copy-html") gulp, config # copy-html
require("#{config.req.tasks}/copy/copy-images") gulp, config # copy-images
require("#{config.req.tasks}/copy/copy-js") gulp, config # copy-js
require("#{config.req.tasks}/copy/copy-libs") gulp, config # copy-libs
require("#{config.req.tasks}/copy/copy-server-config") gulp, config # copy-server-config
require("#{config.req.tasks}/copy/copy-server-node_modules") gulp, config # copy-server-node_modules
require("#{config.req.tasks}/copy/copy-views") gulp, config # copy-views
require("#{config.req.tasks}/copy/copy-bower_components") gulp, config # copy-bower_components
require("#{config.req.tasks}/copy/copy-css") gulp, config # copy-css
require("#{config.req.tasks}/copy/copy-html") gulp, config # copy-html
require("#{config.req.tasks}/copy/copy-images") gulp, config # copy-images
require("#{config.req.tasks}/copy/copy-js") gulp, config # copy-js
require("#{config.req.tasks}/copy/copy-libs") gulp, config # copy-libs
require("#{config.req.tasks}/copy/copy-server-config") gulp, config # copy-server-config
require("#{config.req.tasks}/copy/copy-server-node_modules") gulp, config # copy-server-node_modules
require("#{config.req.tasks}/copy/copy-views") gulp, config # copy-views

# manage
# ======
require("#{config.req.tasks}/manage/bower") gulp, config # bower
require("#{config.req.tasks}/manage/bower") gulp, config # bower

# minify
# ======
require("#{config.req.tasks}/minify/concat-all-files") gulp, config # concat-all-files
require("#{config.req.tasks}/minify/concat-app-files") gulp, config # concat-app-files
require("#{config.req.tasks}/minify/minify-client") gulp, config # minify-client
require("#{config.req.tasks}/minify/minify-css") gulp, config # minify-css
require("#{config.req.tasks}/minify/minify-images") gulp, config # minify-images
require("#{config.req.tasks}/minify/minify-js") gulp, config # minify-js
require("#{config.req.tasks}/minify/minify-server") gulp, config # minify-server
require("#{config.req.tasks}/minify/minify-spa") gulp, config # minify-spa
require("#{config.req.tasks}/minify/template-cache") gulp, config # template-cache
require("#{config.req.tasks}/minify/concat-scripts-and-styles") gulp, config # concat-scripts-and-styles
require("#{config.req.tasks}/minify/minify-client") gulp, config # minify-client
require("#{config.req.tasks}/minify/minify-css") gulp, config # minify-css
require("#{config.req.tasks}/minify/minify-images") gulp, config # minify-images
require("#{config.req.tasks}/minify/minify-js") gulp, config # minify-js
require("#{config.req.tasks}/minify/minify-server") gulp, config # minify-server
require("#{config.req.tasks}/minify/minify-spa") gulp, config # minify-spa
require("#{config.req.tasks}/minify/template-cache") gulp, config # template-cache

# server
# ======
require("#{config.req.tasks}/server/start-server") gulp, config # start-server
require("#{config.req.tasks}/server/nodemon") gulp, config, bs # nodemon
require("#{config.req.tasks}/server/start-server") gulp, config # start-server
require("#{config.req.tasks}/server/nodemon") gulp, config, bs # nodemon

# watch
# =====
require("#{config.req.tasks}/watch/watch") gulp, config, bs # watch
require("#{config.req.tasks}/watch/watch-build-spa") gulp, config # watch-build-spa
require("#{config.req.tasks}/watch/watch") gulp, config, bs # watch
require("#{config.req.tasks}/watch/watch-build-spa") gulp, config # watch-build-spa


@@ -25,9 +25,9 @@
},
"dependencies": {
"bower": "~1.4.1",
"browser-sync": "~2.7.11",
"browser-sync": "~2.7.12",
"coffee-script": "~1.9.3",
"colors": "~1.1.0",
"colors": "~1.1.2",
"del": "~1.2.0",
"event-stream": "~3.3.1",
"express": "~4.12.4",
@@ -22,8 +22,10 @@ module.exports = (gulp, config) ->
defer = q.defer()
tasks = [
-> delTask [
config.temp.client.styles.all.path
config.temp.client.scripts.all.path
config.temp.client.scripts.glob
config.temp.client.styles.glob
"!#{config.temp.client.scripts.min.path}"
"!#{config.temp.client.styles.min.path}"
]
-> delTask [
config.glob.dist.rb.client.all
@@ -33,7 +35,7 @@ module.exports = (gulp, config) ->
config.glob.dist.app.client.styles.all
]
-> moveTask(
"#{config.temp.client.dir}/**/*"
config.temp.client.glob
config.dist.app.client.dir
)
-> delTask config.temp.client.dir

This file was deleted.

This file was deleted.

0 comments on commit 6aad6b9

Please sign in to comment.
You can’t perform that action at this time.