Merge pull request #3 from nelsyeung/dev

Add alternate search path #2
nelsyeung · Dec 21, 2016 · 868fe49 · 868fe49
2 parents 8e0d076 + 49bd4d7
commit 868fe49
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,18 @@ usemin src/index.html -d dist -o dist/index.html --htmlmin true -c config.js
 ```
 
 ### Example HTML
+#### Blocks
+Blocks are expressed as:
+```html
+<!-- build:<pipelineId>(alternate search path) <path> -->
+... HTML Markup, list of script / link tags.
+<!-- endbuild -->
+```
+
+- **pipelineId**: pipeline id for options or remove to remove a section
+- **alternate search path**: (optional) By default the input files are relative to the treated file. Alternate search path allows one to change that
+- **path**: the file path of the optimized file, the target output
+
 ```html
 <!-- build:css css/main.js -->
 <link rel="stylesheet" href="css/main.css">
@@ -65,6 +77,19 @@ Running the command with `--rmlr true` will output:
 <script defer async src="js/main.js"></script>
 ```
 
+#### Alternate search path
+```html
+<!-- build:js(js) js/main.js -->
+<script defer async src="app.js"></script>
+<script defer async src="controllers.js"></script>
+<!-- endbuild -->
+
+<!-- build:js(js,.tmp) js/main.js -->
+<script defer async src="app.js"></script>
+<script defer async src="controllers.js"></script>
+<!-- endbuild -->
+```
+
 ### Config file
 
 Please check the relevant documentations for the available options: [ UglifyJS](https://github.com/mishoo/UglifyJS2), [CleanCSS](https://github.com/jakubpawlowicz/clean-css) and [HTML minifier](https://github.com/kangax/html-minifier).

diff --git a/lib/getBlocks.js b/lib/getBlocks.js
@@ -1,5 +1,6 @@
 'use strict';
 var path = require('path');
+var fs = require('fs');
 
 module.exports = function (src, content, removeLivereload) {
 	var buildReg = /<!--\s*build:(\w+)(?:\(([^\)]+)\))?\s*([^\s]+)\s*-->/;
@@ -24,9 +25,14 @@ module.exports = function (src, content, removeLivereload) {
 				type: build[1],
 				dest: build[3],
 				indent: indent,
+				searchPath: [''],
 				src: [],
 				raw: []
 			};
+
+			if (build[2]) {
+				block.searchPath = build[2].split(',');
+			}
 		}
 
 		if (removeLivereload && livereload) {
@@ -47,7 +53,19 @@ module.exports = function (src, content, removeLivereload) {
 			var asset = l.match(/(href|src)=["']([^'"]+)["']/);
 
 			if (asset && asset[2]) {
-				block.src.push(path.join(srcDir, asset[2]));
+				var numSearchPath = block.searchPath.length;
+
+				for (var i = 0; i < numSearchPath; i++) {
+					var assetPath = path.join(srcDir, block.searchPath[i], asset[2]);
+
+					try {
+						fs.accessSync(assetPath, fs.F_OK);
+						block.src.push(assetPath);
+						break;
+					} catch (e) {
+						continue;
+					}
+				}
 
 				// Preserve defer attribute
 				var defer = / defer/.test(l);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "usemin-cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).",
   "main": "index.js",
   "bin": {

diff --git a/test/fixtures/alt-search-path.html b/test/fixtures/alt-search-path.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+</head>
+
+<body>
+	<!-- build:js(alt,alt2) js/main.js -->
+	<script src="foo.js"></script>
+	<script src="bar.js"></script>
+	<script src="foobar.js"></script>
+	<!-- endbuild -->
+</body>
+</html>
diff --git a/test/fixtures/alt/bar.js b/test/fixtures/alt/bar.js
diff --git a/test/fixtures/alt/foo.js b/test/fixtures/alt/foo.js
diff --git a/test/fixtures/alt2/foobar.js b/test/fixtures/alt2/foobar.js
diff --git a/test/fixtures/css.html b/test/fixtures/css.html
@@ -5,8 +5,8 @@
 	<title></title>
 
 	<!-- build:css css/main.css -->
-	<link rel="stylesheet" href="css/main.css">
-	<link rel="stylesheet" href="css/test.css">
+	<link rel="stylesheet" href="css/foo.css">
+	<link rel="stylesheet" href="css/bar.css">
 	<!-- endbuild -->
 </head>
 

diff --git a/test/fixtures/css/bar.css b/test/fixtures/css/bar.css
diff --git a/test/fixtures/css/foo.css b/test/fixtures/css/foo.css
diff --git a/test/fixtures/defer-async.html b/test/fixtures/defer-async.html
@@ -7,10 +7,8 @@
 
 <body>
 	<!-- build:js js/main.js -->
-	<script defer async src="js/app.js"></script>
-	<script defer async src="js/models.js"></script>
-	<script defer async src="js/views.js"></script>
-	<script defer async src="js/controllers.js"></script>
+	<script defer async src="js/foo.js"></script>
+	<script defer async src="js/bar.js"></script>
 	<!-- endbuild -->
 </body>
 </html>
diff --git a/test/fixtures/index.html b/test/fixtures/index.html
@@ -5,24 +5,20 @@
 	<title></title>
 
 	<!-- build:css css/main.css -->
-	<link rel="stylesheet" href="css/main.css">
-	<link rel="stylesheet" href="css/test.css">
+	<link rel="stylesheet" href="css/foo.css">
+	<link rel="stylesheet" href="css/bar.css">
 	<!-- endbuild -->
 </head>
 
 <body>
 	<!-- build:js js/main.js -->
-	<script src="js/app.js"></script>
-	<script src="js/models.js"></script>
-	<script src="js/views.js"></script>
-	<script src="js/controllers.js"></script>
+	<script src="js/foo.js"></script>
+	<script src="js/bar.js"></script>
 	<!-- endbuild -->
 
 	<!-- build:js js/main.js -->
-	<script defer async src="js/app.js"></script>
-	<script defer async src="js/models.js"></script>
-	<script defer async src="js/views.js"></script>
-	<script defer async src="js/controllers.js"></script>
+	<script defer async src="js/foo.js"></script>
+	<script defer async src="js/bar.js"></script>
 	<!-- endbuild -->
 	<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
 </body>

diff --git a/test/fixtures/js.html b/test/fixtures/js.html
@@ -7,10 +7,8 @@
 
 <body>
 	<!-- build:js js/main.js -->
-	<script src="js/app.js"></script>
-	<script src="js/models.js"></script>
-	<script src="js/views.js"></script>
-	<script src="js/controllers.js"></script>
+	<script src="js/foo.js"></script>
+	<script src="js/bar.js"></script>
 	<!-- endbuild -->
 </body>
 </html>
diff --git a/test/fixtures/js/bar.js b/test/fixtures/js/bar.js
diff --git a/test/fixtures/js/config.js b/test/fixtures/js/config.js
@@ -0,0 +1,25 @@
+module.exports = {
+	uglifyjs: {
+		outSourceMap: 'minified.js.map',
+		warnings: true,
+		mangle: true,
+		compress: {
+			loops: true,
+			unused: true
+		}
+	},
+	cleancss: {
+		advanced: true,
+		keepBreaks: true,
+		rebase: false
+	},
+	htmlminifier: {
+		removeComments: true,
+		collapseWhitespace: true,
+		removeEmptyAttributes: true,
+		removeScriptTypeAttributes: true,
+		removeStyleLinkTypeAttributes: true,
+		minifyJS: false,
+		minifyCSS: false
+	}
+};
diff --git a/test/fixtures/js/foo.js b/test/fixtures/js/foo.js
diff --git a/test/getBlocksSpec.js b/test/getBlocksSpec.js
@@ -16,18 +16,15 @@ describe('Get Blocks', function () {
 				type: 'js',
 				dest: 'js/main.js',
 				indent: '\t',
+				searchPath: [''],
 				src: [
-					inputDir + 'js/app.js',
-					inputDir + 'js/models.js',
-					inputDir + 'js/views.js',
-					inputDir + 'js/controllers.js'
+					inputDir + 'js/foo.js',
+					inputDir + 'js/bar.js',
 				],
 				raw: [
 					'\t<!-- build:js js/main.js -->',
-					'\t<script src="js/app.js"></script>',
-					'\t<script src="js/models.js"></script>',
-					'\t<script src="js/views.js"></script>',
-					'\t<script src="js/controllers.js"></script>',
+					'\t<script src="js/foo.js"></script>',
+					'\t<script src="js/bar.js"></script>',
 					'\t<!-- endbuild -->'
 				]
 			}
@@ -47,18 +44,15 @@ describe('Get Blocks', function () {
 				type: 'js',
 				dest: 'js/main.js',
 				indent: '\t',
+				searchPath: [''],
 				src: [
-					inputDir + 'js/app.js',
-					inputDir + 'js/models.js',
-					inputDir + 'js/views.js',
-					inputDir + 'js/controllers.js'
+					inputDir + 'js/foo.js',
+					inputDir + 'js/bar.js',
 				],
 				raw: [
 					'\t<!-- build:js js/main.js -->',
-					'\t<script defer async src="js/app.js"></script>',
-					'\t<script defer async src="js/models.js"></script>',
-					'\t<script defer async src="js/views.js"></script>',
-					'\t<script defer async src="js/controllers.js"></script>',
+					'\t<script defer async src="js/foo.js"></script>',
+					'\t<script defer async src="js/bar.js"></script>',
 					'\t<!-- endbuild -->'
 				]
 			}
@@ -78,14 +72,15 @@ describe('Get Blocks', function () {
 				type: 'css',
 				dest: 'css/main.css',
 				indent: '\t',
+				searchPath: [''],
 				src: [
-					inputDir + 'css/main.css',
-					inputDir + 'css/test.css'
+					inputDir + 'css/foo.css',
+					inputDir + 'css/bar.css'
 				],
 				raw: [
 					'\t<!-- build:css css/main.css -->',
-					'\t<link rel="stylesheet" href="css/main.css">',
-					'\t<link rel="stylesheet" href="css/test.css">',
+					'\t<link rel="stylesheet" href="css/foo.css">',
+					'\t<link rel="stylesheet" href="css/bar.css">',
 					'\t<!-- endbuild -->'
 				]
 			}
@@ -109,4 +104,34 @@ describe('Get Blocks', function () {
 
 		expect(blocks).to.eql(outcome);
 	});
+
+	it('should get JS block with alternate search path', function () {
+		var src = inputDir + 'alt-search-path.html';
+		var content = fs.readFileSync(src).toString();
+		var blocks = getBlocks(src, content);
+		var outcome = [
+			{
+				async: false,
+				defer: false,
+				type: 'js',
+				dest: 'js/main.js',
+				indent: '\t',
+				searchPath: ['alt', 'alt2'],
+				src: [
+					inputDir + 'alt/foo.js',
+					inputDir + 'alt/bar.js',
+					inputDir + 'alt2/foobar.js',
+				],
+				raw: [
+					'\t<!-- build:js(alt,alt2) js/main.js -->',
+					'\t<script src="foo.js"></script>',
+					'\t<script src="bar.js"></script>',
+					'\t<script src="foobar.js"></script>',
+					'\t<!-- endbuild -->'
+				]
+			}
+		];
+
+		expect(blocks).to.eql(outcome);
+	});
 });