Permalink
Browse files

new way to concat css files together

adding css/concat directory with the css files named in the order they should be included.
the build script then concats these files in alphabetical order and replaces their block with the concated file using the same method as the .js swap (looks for the surrounding comments).
  • Loading branch information...
1 parent 5e26749 commit 0928889ddc85ce04f08461841d8e4cec51f03917 @darktable darktable committed Jun 25, 2011
View
@@ -492,9 +492,6 @@
<fileset dir="${dir.source}/${dir.js}">
<include name="**/*.js"/>
<exclude name="**/*.min.js"/>
- <!-- minifying these is unnecessary, and will cause them to include themselves on the next build -->
- <!--<exclude name="scripts-concat.js"/>-->
- <!--<exclude name="libs-concat.js"/>-->
</fileset>
<arg line="-jar"/>
<arg path="./${dir.build.tools}/${tool.yuicompressor}"/>
@@ -559,37 +556,26 @@
<echo>Remove favicon.ico reference if it is pointing to the root</echo>
<replaceregexp match="&lt;link rel=[&quot;']shortcut icon[&quot;'] href=[&quot;']/favicon\.ico[&quot;']&gt;" replace="">
- <fileset dir="./${dir.intermediate}" includes="${page-files}"/>
+ <fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>
<!-- we maintain the apple-touch-icon reference for Android 2.2 www.ravelrumba.com/blog/android-apple-touch-icon
<replace token="&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;>" value="">
- <fileset dir="./${dir.intermediate}" includes="${page-files}"/>
+ <fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replace>
-->
<echo message="Update the HTML to reference our concatenated script file: ${scripts.js}"/>
<!-- style.css replacement handled as a replacetoken above -->
<replaceregexp match="&lt;!-- scripts concatenated [\d\w\s\W]*?!-- end ((scripts)|(concatenated and minified scripts))--&gt;" replace="&lt;script src='${scripts.js}\'&gt;&lt;/script&gt;" flags="m">
- <fileset dir="./${dir.intermediate}" includes="${page-files}"/>
+ <fileset dir="${dir.intermediate}" includes="${page-files}"/>
</replaceregexp>
<!--[! use comments like this one to avoid having them get minified -->
<echo message="Updating the HTML with the new css filename: ${style.css}"/>
- <if>
- <isset property="gae.css_dir" />
- <then>
- <replaceregexp match="href=[&quot;']([\/]?)${gae.css_dir}\/style.css[&quot;']"
- replace="href=&quot;\1${style.css}&quot;" flags="g">
- <fileset dir="./${dir.intermediate}" includes="${page-files}"/>
- </replaceregexp>
- </then>
- <else>
- <replaceregexp match="href=[&quot;']([\/]?)${dir.css}\/style.css[&quot;']"
- replace="href=&quot;\1${style.css}&quot;" flags="g">
- <fileset dir="./${dir.intermediate}" includes="${page-files}"/>
- </replaceregexp>
- </else>
- </if>
+
+ <replaceregexp match="&lt;!-- CSS concatenated [\d\w\s\W]*?!-- end CSS--&gt;" replace="&lt;link rel='stylesheet' href='${style.css}'&gt;" flags="m">
+ <fileset dir="${dir.intermediate}" includes="${page-files}"/>
+ </replaceregexp>
</target>
@@ -662,17 +648,22 @@
<target name="-css" depends="-mkdirs" description="Concatenates and Minifies any stylesheets listed in the file.stylesheets property">
<echo message="Concatenating css..."/>
+ <fileset dir="${dir.source}/${dir.css}" includes="${stylesheet-files}" id="css.references"/>
+
+ <pathconvert pathsep="," property="css.list" refid="css.references"/>
+ <sortlist property="sorted.css.list" value="${css.list}" delimiter=","/>
+
<!-- overwrite=no here means not to overwrite if the target is newer than the sources -->
- <concat destfile="./${dir.intermediate}/${dir.css}/style-concat.css" overwrite="no">
- <filelist dir="./${dir.source}/${dir.css}" files="${stylesheet-files}"/>
+ <concat destfile="${dir.intermediate}/${dir.css}/style-concat.css" overwrite="no">
+ <filelist files="${sorted.css.list}"/>
</concat>
<echo message="Minifying css..."/>
<apply executable="java" parallel="false">
- <fileset dir="./${dir.intermediate}/${dir.css}/" includes="style-concat.css"/>
+ <fileset dir="${dir.intermediate}/${dir.css}/" includes="style-concat.css"/>
<arg line="-jar"/>
- <arg path="./${dir.build.tools}/${tool.yuicompressor}"/>
+ <arg path="${dir.build.tools}/${tool.yuicompressor}"/>
<srcfile/>
<arg line="-o"/>
<mapper type="merge" to="${basedir}/${dir.intermediate}/${dir.css}/style-concat.min.css"/>
@@ -694,9 +685,9 @@
<echo message="Minifying any unconcatenated css files..."/>
<apply executable="java" parallel="false">
- <fileset dir="./${dir.source}/${dir.css}/" excludes="${stylesheet-files}" includes="**/*.css"/>
+ <fileset dir="${dir.source}/${dir.css}/" excludes="${stylesheet-files}" includes="**/*.css"/>
<arg line="-jar"/>
- <arg path="./${dir.build.tools}/${tool.yuicompressor}"/>
+ <arg path="${dir.build.tools}/${tool.yuicompressor}"/>
<srcfile/>
<arg line="-o"/>
<mapper type="glob" from="*.css" to="${basedir}/${dir.publish}/${dir.css}/*.css"/>
@@ -49,7 +49,7 @@ file.default.exclude = .gitignore, .project, .settings, README.markdown,
#
# Default Stylesheet
#
-file.default.stylesheets = style.css
+file.default.stylesheets = concat/**/*.css
#
# Script Optimisation
@@ -194,92 +194,3 @@ input:invalid, textarea:invalid { background-color: #f0dddd; }
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
-
-
-/* =============================================================================
- Primary styles
- Author:
- ========================================================================== */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* =============================================================================
- Non-semantic helper classes
- Please define your styles before this section.
- ========================================================================== */
-
-/* For image replacement */
-.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
-.ir br { display: none; }
-
-/* Hide for both screenreaders and browsers:
- css-discuss.incutio.com/wiki/Screenreader_Visibility */
-.hidden { display: none; visibility: hidden; }
-
-/* Hide only visually, but have it available for screenreaders: by Jon Neal.
- www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
-.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-
-/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
-.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
-
-/* Hide visually and from screenreaders, but maintain layout */
-.invisible { visibility: hidden; }
-
-/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
-.clearfix:before, .clearfix:after { content: ""; display: table; }
-.clearfix:after { clear: both; }
-.clearfix { zoom: 1; }
-
-
-
-/* =============================================================================
- PLACEHOLDER Media Queries for Responsive Design.
- These override the primary ('mobile first') styles
- Modify as content requires.
- ========================================================================== */
-
-@media only screen and (min-width: 480px) {
- /* Style adjustments for viewports 480px and over go here */
-
-}
-
-@media only screen and (min-width: 768px) {
- /* Style adjustments for viewports 768px and over go here */
-
-}
-
-
-
-/* =============================================================================
- Print styles.
- Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
- ========================================================================== */
-
-@media print {
- * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
- a, a:visited { color: #444 !important; text-decoration: underline; }
- a[href]:after { content: " (" attr(href) ")"; }
- abbr[title]:after { content: " (" attr(title) ")"; }
- .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
- pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
- thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
- tr, img { page-break-inside: avoid; }
- img { max-width: 100% !important; }
- @page { margin: 0.5cm; }
- p, h2, h3 { orphans: 3; widows: 3; }
- h2, h3{ page-break-after: avoid; }
-}
View
@@ -0,0 +1,19 @@
+/* =============================================================================
+ Primary styles
+ Author:
+ ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
View
@@ -0,0 +1,29 @@
+/* =============================================================================
+ Non-semantic helper classes
+ Please define your styles before this section.
+ ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+
+/* Hide for both screenreaders and browsers:
+ css-discuss.incutio.com/wiki/Screenreader_Visibility */
+.hidden { display: none; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: by Jon Neal.
+ www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
@@ -0,0 +1,16 @@
+/* =============================================================================
+ PLACEHOLDER Media Queries for Responsive Design.
+ These override the primary ('mobile first') styles
+ Modify as content requires.
+ ========================================================================== */
+
+@media only screen and (min-width: 480px) {
+ /* Style adjustments for viewports 480px and over go here */
+
+}
+
+@media only screen and (min-width: 768px) {
+ /* Style adjustments for viewports 768px and over go here */
+
+}
+
View
@@ -0,0 +1,19 @@
+/* =============================================================================
+ Print styles.
+ Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+@media print {
+ * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
+ a, a:visited { color: #444 !important; text-decoration: underline; }
+ a[href]:after { content: " (" attr(href) ")"; }
+ abbr[title]:after { content: " (" attr(title) ")"; }
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+ tr, img { page-break-inside: avoid; }
+ img { max-width: 100% !important; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
+}
View
@@ -21,7 +21,13 @@
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<!-- CSS: implied media="all" -->
- <link rel="stylesheet" href="css/style.css">
+ <!-- CSS concatenated and minified via ant build script-->
+ <link rel="stylesheet" href="css/concat/00_normalize.css">
+ <link rel="stylesheet" href="css/concat/01_primary.css">
+ <link rel="stylesheet" href="css/concat/02_helpers.css">
+ <link rel="stylesheet" href="css/concat/03_responsive.css">
+ <link rel="stylesheet" href="css/concat/04_print.css">
+ <!-- end CSS-->
<!-- More ideas for your <head> here: h5bp.com/docs/#head-Tips -->

0 comments on commit 0928889

Please sign in to comment.