Skip to content
Permalink
Browse files

feat(build option): add build option dist.paths.absolute (defaults to…

… true) set to false to create relative urls, see build options doc for more info
  • Loading branch information
jyounce committed Jul 19, 2016
1 parent d14024d commit f0961b4f90afb3650ed7427a1fc389cdd0a9f54d
@@ -116,6 +116,7 @@ rapid-build.json (build options - can be cson, json or js file)
# dist.client[images|scripts|styles|test|views].dir = (string) defaults to property name
# dist.client.bower.dir = (string) defaults to 'bower_components'
# dist.client.libs.dir = (string) defaults to 'libs' = 3rd party libraries that aren't bower components
# dist.paths.absolute = (boolean) defaults to true = set to false to create relative urls instead of absolute for link tag's href, script tag's src and urls in css
# dist.server.dir = (string) defaults to 'server'
# dist.server.test.dir = (string) defaults to 'test'
# dist.server.fileName = (string) defaults to 'routes.js': this is the server's entry script
@@ -53,6 +53,7 @@ common:
client:
css: [
'libs/bootstrap/bootstrap.css'
'libs/highlight/**/*.css'
]

dev:
@@ -230,12 +230,24 @@ angular.module('rapid-build').constant 'BUILD_OPTS', [
,
label: 'Property name example, \'scripts\''
]
# ,
# label: 'client.paths.absolute'
# info: '@type boolean, @default true'
# items: [
# label: 'By default, the build creates urls absolute to the root of the domain for:'
# ]
,
label: 'client.paths.absolute'
info: '@type boolean, @default true'
items: [
label: 'Set to false to create relative urls.'
,
label: 'By default, the build creates
<a target="_blank" href="https://goo.gl/jK1i0L">urls absolute</a>
to the root of your domain for:'
items: [
label: 'link tag\'s href attribute'
info: 'for stylesheets'
,
label: 'script tag\'s src attribute'
,
label: 'and changes urls in css to absolute'
]
]
,
label: 'server.dir'
info: '@type string, @default \'server\''
@@ -274,7 +286,8 @@ angular.module('rapid-build').constant 'BUILD_OPTS', [
scripts: { dir: 'js' },
styles: { dir: 'css' },
test: { dir: 'tests' },
views: { dir: 'html' }
views: { dir: 'html' },
paths: { absolute: false }
},
server: {
dir: 'backend',
@@ -184,6 +184,12 @@ module.exports = (config, options) ->

formatDist() # only one dist.dir

# absolute client paths
# =====================
config.dist.client = {}
config.dist.client.paths = {}
config.dist.client.paths.absolute = if options.dist.client.paths.absolute is null then true else !!options.dist.client.paths.absolute

# logs
# ====
# log.json config.dist, 'config.dist ='
@@ -24,6 +24,11 @@ module.exports = (config, options) ->
# ==========================
options.dist.server.fileName = null unless isType.string options.dist.server.fileName

# absolute client paths
# =====================
options.dist.client.paths = {} unless isType.object options.dist.client.paths
options.dist.client.paths.absolute = null unless isType.boolean options.dist.client.paths.absolute

# return
# ======
options
@@ -45,9 +45,10 @@ module.exports = (config, gulp={}) ->
# console.log "was called from task #{taskName} = #{calledFromTask}".yellow
calledFromTask

startTask: (taskName) ->
# ALERT: gulp.start is supposedly going away in gulp 4
gulp.start "#{config.rb.prefix.task}#{taskName}"
startTask: (taskPath, taskOpts={}) ->
task = require "#{config.req.tasks}#{taskPath}"
taskOpts.taskCB = taskOpts.taskCB or ->
task config, gulp, taskOpts

addTask: (taskName, _path, opts={}) -> # very important method
deps = getTaskDeps opts.deps
@@ -82,7 +82,8 @@ module.exports = (gulp, config) ->

# format
# ======
taskHelp.addTask 'absolute-css-urls', '/format/absolute-css-urls'
taskHelp.addTask 'update-css-urls', '/format/update-css-urls'
taskHelp.addTask 'update-css-urls:prod', '/format/update-css-urls', calledFrom: 'minify-task'

# generate
# ========
@@ -126,14 +126,15 @@ findAndReplace = (css, config, paths, opts, imports, formatTask, regX) ->
# Main (replace relative urls with absolute urls)
# ===============================================
replaceCssUrls = (file, root, config, opts={}) ->
css = file.contents.toString()
_root = format.root root
abs = format.absPath file, _root
base = pathHelp.format file.base
rel = pathHelp.format file.relative
isRbPath = base.indexOf(opts.rbDistDir) isnt -1
paths = { root, abs, base, rel, isRbPath }
imports = []
css = file.contents.toString()
_root = format.root root
abs = format.absPath file, _root
base = pathHelp.format file.base
rel = pathHelp.format file.relative
rbDistPath = pathHelp.format opts.rbDistPath
isRbPath = base.indexOf(rbDistPath) isnt -1
paths = { root, abs, base, rel, isRbPath }
imports = []

# urlPath = ../images/superheroes.png | /images/superheroes.png
css = findAndReplace css, config, paths, opts, imports, 'getCssUrl', urlRegX # match = url('../images/x.png')
@@ -47,8 +47,10 @@ module.exports = (config, gulp, taskOpts={}) ->
getFilesJson = (jsonEnvFile) ->
jsonEnvFile = path.join config.generated.pkg.files.path, jsonEnvFile
moduleHelp.cache.delete jsonEnvFile
removePathSection = config.dist.app.client.dir
removePathSection += '/' unless config.dist.client.paths.absolute
files = require(jsonEnvFile).client
files = pathHelp.removeLocPartial files, config.dist.app.client.dir
files = pathHelp.removeLocPartial files, removePathSection
files.styles = format.paths.to.html files.styles, 'styles', join: true, lineEnding: '\n\t'
files.scripts = format.paths.to.html files.scripts, 'scripts', join: true, lineEnding: '\n\t'
files
@@ -30,7 +30,7 @@ module.exports = (config, gulp, taskOpts={}) ->
"#{config.rb.prefix.task}compile-extra-sass:client"
"#{config.rb.prefix.task}copy-extra-files:client"
]
"#{config.rb.prefix.task}absolute-css-urls"
"#{config.rb.prefix.task}update-css-urls"
"#{config.rb.prefix.task}clean-rb-client" # if exclude.default.client.files
"#{config.rb.prefix.task}build-files"
cb
@@ -7,8 +7,8 @@ module.exports = (config, gulp, taskOpts={}) ->
plumber = require 'gulp-plumber'
log = require "#{config.req.helpers}/log"
lessHelper = require("#{config.req.helpers}/Less") config, gulp
taskHelp = require("#{config.req.helpers}/tasks") config, gulp
forWatchFile = !!taskOpts.watchFile
absCssUrls = require "#{config.req.tasks}/format/absolute-css-urls" if forWatchFile

# streams
# =======
@@ -35,7 +35,7 @@ module.exports = (config, gulp, taskOpts={}) ->
.on 'data', (file) ->
return unless forWatch
watchFilePath = path.relative file.cwd, file.path
absCssUrls config, gulp, { watchFilePath }
taskHelp.startTask '/format/update-css-urls', { watchFilePath }
.on 'end', ->
# console.log dest
defer.resolve()
@@ -7,8 +7,8 @@ module.exports = (config, gulp, taskOpts={}) ->
plumber = require 'gulp-plumber'
log = require "#{config.req.helpers}/log"
sassHelper = require("#{config.req.helpers}/Sass") config, gulp
taskHelp = require("#{config.req.helpers}/tasks") config, gulp
forWatchFile = !!taskOpts.watchFile
absCssUrls = require "#{config.req.tasks}/format/absolute-css-urls" if forWatchFile
extCss = '.css'

# streams
@@ -39,7 +39,7 @@ module.exports = (config, gulp, taskOpts={}) ->
.on 'data', (file) ->
return unless forWatchFile
watchFilePath = path.relative file.cwd, file.path
absCssUrls config, gulp, { watchFilePath }
taskHelp.startTask '/format/update-css-urls', { watchFilePath }
.on 'end', ->
# console.log dest
defer.resolve()
@@ -2,8 +2,8 @@ module.exports = (config, gulp, taskOpts={}) ->
q = require 'q'
log = require "#{config.req.helpers}/log"
tasks = require("#{config.req.helpers}/tasks") config
taskHelp = require("#{config.req.helpers}/tasks") config, gulp
forWatchFile = !!taskOpts.watchFile
absCssUrls = require "#{config.req.tasks}/format/absolute-css-urls" if forWatchFile

runTask = (src, dest) ->
defer = q.defer()
@@ -18,10 +18,11 @@ module.exports = (config, gulp, taskOpts={}) ->
# ===
api =
runSingle: -> # synchronously
defer = q.defer()
defer = q.defer()
watchFilePath = taskOpts.watchFile.rbDistPath
_tasks = [
-> runTask taskOpts.watchFile.path, taskOpts.watchFile.rbDistDir
-> absCssUrls config, gulp, watchFilePath: taskOpts.watchFile.rbDistPath
-> taskHelp.startTask '/format/update-css-urls', { watchFilePath }
]
_tasks.reduce(q.when, q()).done -> defer.resolve()
defer.promise
@@ -19,7 +19,7 @@ module.exports = (config, gulp, taskOpts={}) ->
promiseHelp.get()

buildSpa = ->
taskHelp.startTask 'watch-build-spa'
taskHelp.startTask '/watch/watch-build-spa'

# tasks
# =====
@@ -32,6 +32,7 @@ module.exports = (config, gulp, taskOpts={}) ->
clientDist = config.dist.app.client.dir
urlOpts = {}
urlOpts.rbDistDir = config.rb.prefix.distDir
urlOpts.rbDistPath = config.dist.rb.client.styles.dir
urlOpts.prependPath = opts.prependPath
gulp.src src, { base }
.pipe absCssUrls clientDist, config, urlOpts
@@ -58,12 +59,14 @@ module.exports = (config, gulp, taskOpts={}) ->
# ===
api =
runSingle: ->
clone = config.internal.getImports()
opts = prependPath: false, src: taskOpts.watchFilePath, watchFileBase: true
runTask('app', 'styles', opts).done ->
clone = config.internal.getImports()
opts = prependPath: false, src: taskOpts.watchFilePath, watchFileBase: true
promise = runTask 'app', 'styles', opts
promise.done ->
imports = config.internal.getImports()
areEqual = arrayHelp.areEqual clone, imports, true
buildSpa() unless areEqual
promise

runTask: -> # synchronously
defer = q.defer()
@@ -0,0 +1,80 @@
module.exports = (config, gulp, taskOpts={}) ->
q = require 'q'
path = require 'path'
log = require "#{config.req.helpers}/log"
pathHelp = require "#{config.req.helpers}/path"
promiseHelp = require "#{config.req.helpers}/promise"
urlRegX = /url\s*\(\s*['"]?(.*?)['"]?\s*\)(?![^\*]*?\*\/)/g
importNoUrlRegX = /@import\s*?['"]+?(.*?)['"]+?(?![^\*]*?\*\/)/g
forWatchFile = !!taskOpts.watchFilePath

# constants
# =========
CLIENT_DIST_ROOT = path.join config.app.dir, config.dist.app.client.dir

# helpers
# =======
getRelativePath = (cssPath, absPath) ->
relPath = path.relative cssPath, absPath
# for windows
relPath = path.normalize relPath
relPath = pathHelp.swapBackslashes relPath

findAndReplace = (css, cssPath, regX) ->
css.replace regX, (match, urlPath) ->
isAbsolute = urlPath[0] is '/'
return match unless isAbsolute
absPath = path.join CLIENT_DIST_ROOT, urlPath
relPath = getRelativePath cssPath, absPath
relUrl = match.replace urlPath, relPath
# log.task relUrl, 'minor'
return relUrl

# tasks
# =====
runTask = (appOrRb, type, opts={}) ->
defer = q.defer()
src = opts.single if opts.single
base = if opts.single then config.dist.app.client.styles.dir else null
src = config.glob.dist[appOrRb].client[type][opts.glob] if opts.glob
dest = config.dist[appOrRb].client[type].dir
gulp.src src, { base }
.on 'data', (file) ->
css = file.contents
return unless css
css = css.toString()
cssPath = path.dirname file.path # css file directory path
css = findAndReplace css, cssPath, urlRegX # match = url('/images/x.png')
css = findAndReplace css, cssPath, importNoUrlRegX # match = @import '/imports/x.css'
file.contents = new Buffer css
.pipe gulp.dest dest
.on 'end', ->
defer.resolve()
defer.promise

# API
# ===
api =
runSingle: -> # for watch
runTask 'app', 'styles', single: taskOpts.watchFilePath

runMulti: (env) -> # async
defer = q.defer()
q.all([
runTask 'rb', 'bower', glob: 'css'
runTask 'rb', 'libs', glob: 'css'
runTask 'rb', 'styles', glob: 'all'
runTask 'app', 'bower', glob: 'css'
runTask 'app', 'libs', glob: 'css'
runTask 'app', 'styles', glob: 'all'
]).done ->
log.task 'changed all css urls to relative'
defer.resolve()
defer.promise

# return
# ======
return api.runSingle() if forWatchFile
api.runMulti taskOpts.env


@@ -0,0 +1,33 @@
module.exports = (config, gulp, taskOpts={}) ->
q = require 'q'
log = require "#{config.req.helpers}/log"
promiseHelp = require "#{config.req.helpers}/promise"
taskHelp = require("#{config.req.helpers}/tasks") config, gulp

# API
# ===
api =
runTask: -> # synchronously
return promiseHelp.get() unless config.build.client
calledFromMinTask = taskOpts.calledFrom is 'minify-task'
skipInCommonTask = config.env.is.prod and not calledFromMinTask
defer = q.defer()
tasks = [
-> # only run in common-client task
return promiseHelp.get() if calledFromMinTask
taskHelp.startTask '/format/absolute-css-urls', taskOpts

-> # skip in common-client task if prod build
return promiseHelp.get() if config.dist.client.paths.absolute
return promiseHelp.get() if skipInCommonTask
taskHelp.startTask '/format/relative-css-urls', taskOpts
]
tasks.reduce(q.when, q()).done ->
# log.task 'updated css urls', 'minor'
defer.resolve()
defer.promise

# return
# ======
api.runTask()

@@ -20,6 +20,7 @@ module.exports = (config, gulp, taskOpts={}) ->
"#{config.rb.prefix.task}inline-css-imports"
"#{config.rb.prefix.task}cleanup-client"
"#{config.rb.prefix.task}css-file-split"
"#{config.rb.prefix.task}update-css-urls:prod"
"#{config.rb.prefix.task}build-spa:prod"
"#{config.rb.prefix.task}minify-spa"
"#{config.rb.prefix.task}cache-bust"
@@ -24,7 +24,7 @@ module.exports = (config, gulp) ->

buildSpa: ->
return promiseHelp.get() unless config.build.client
taskHelp.startTask 'watch-build-spa'
taskHelp.startTask '/watch/watch-build-spa'

browserSync: ->
return unless config.build.server

0 comments on commit f0961b4

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