Skip to content

Commit

Permalink
fix(prod build): fix the loading order of scripts and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jyounce
jyounce committed Jun 17, 2015
1 parent 171426f commit 6aad6b9
Show file tree
Hide file tree
Showing 15 changed files with 265 additions and 202 deletions.
18 changes: 6 additions & 12 deletions README.md
View file
Expand Up @@ -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)
Expand Down
18 changes: 16 additions & 2 deletions config/config-file-names.coffee
View file
Expand Up @@ -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'
Expand Down
4 changes: 2 additions & 2 deletions config/config-globs.coffee
View file
Expand Up @@ -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']
Expand Down
2 changes: 1 addition & 1 deletion config/config-order.coffee
View file
Expand Up @@ -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: [
Expand Down
35 changes: 24 additions & 11 deletions config/config-temp.coffee
View file
@@ -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
# ===================
Expand Down
77 changes: 38 additions & 39 deletions init/tasks.coffee
View file
Expand Up @@ -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


4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -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",
Expand Down
8 changes: 5 additions & 3 deletions tasks/clean/cleanup-client.coffee
View file
Expand Up @@ -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
Expand 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
Expand Down
52 changes: 0 additions & 52 deletions tasks/minify/concat-all-files.coffee
View file

This file was deleted.

45 changes: 0 additions & 45 deletions tasks/minify/concat-app-files.coffee
View file

This file was deleted.

0 comments on commit 6aad6b9

Please sign in to comment.