usemin not woking?
Closed this issue · 12 comments
node 0.6.18
h5bp v0.2.2
grunt v0.3.9
just get the default fileset with h5bp init:h5bp , then run h5bp build:text , every works except the usemin , the index.html in the publish nothing changed ?
css :
<link rel="stylesheet" href="css/style.css">script :
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->Hi eggcaker,
The usemin task in this build script is a bit different. See the usemin page in the wiki for further details.
You'll need to tweak the html file with this kind of blocks + "directives"
<!-- build:css css/site.css -->
<link rel="stylesheet" href="css/style.css">
<!-- endbuild -->You should get
<link rel="stylesheet" href="css/site.css">The usemin task parses the html files in your configuration and looks for this special kind of wrapping comments.
In addition to that, it should replace any scripts / stylesheets that were "revved" with the rev task to their new name (the lookup is based on the filename, so if you have a js/456762.plugins.js it should replace the reference to js/pluginsto bejs/456762.plugins.js`) If that's not the case, this is something we need to fix.
I'll do a few tests with the basic workflow you described.
I can confirm the issue. Thansk for the report :)
The semantic of the usemin task have changed a bit, I still need to update the documentation. Will do asap.
Prior to this commit 9ea030af03, we used a files config to list all the files the usemin task is about to process. It's now used with other extensions than html (css specifically).
usemin: {
files: ['**/*.html']
},is what the init task generates. It needs to be changed to the following:
usemin: {
html: ['**/*.html']
},If you need to also do the replacement in style sheets (for background img mainly), you can also use:
usemin: {
html: ['**/*.html'],
css: ['**/*.css']
},Could you test changing the file suprop into html? It should debug you out.
I'll let this issue open, until:
- the init task is updated to generate the proper usemin config
- documentation for the usemin task is up to date
changed and tested, the css usemin works now, but the js tag still not replace
the h5bp build:text log:
usemin - index.html
>> js/vendor/modernizr-2.5.3.min.js
was <script src="js/vendor/modernizr-2.5.3.min.js"></script>
now <script src="js/vendor/modernizr-2.5.3.min.js"></script>
>> js/vendor/jquery-1.7.2.min.js
was <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>
now <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>
>> js/plugins.js
was <script src="js/plugins.js"></script>
now <script src="js/plugins.js"></script>
>> js/main.js
was <script src="js/main.js"></script>
now <script src="js/main.js"></script>
>> css/style.css
was <link rel="stylesheet" href="css/style.css">
now <link rel="stylesheet" href="css/73ef6e0f.style.css">tree of publish directory after generated :
publish
├── 404.html
├── apple-touch-icon-114x114-precomposed.png
├── apple-touch-icon-144x144-precomposed.png
├── apple-touch-icon-57x57-precomposed.png
├── apple-touch-icon-72x72-precomposed.png
├── apple-touch-icon.png
├── apple-touch-icon-precomposed.png
├── crossdomain.xml
├── css
│ └── 73ef6e0f.style.css
├── favicon.ico
├── grunt.js
├── humans.txt
├── img
├── index.html
├── js
│ ├── 536a55c9.main.js
│ ├── 8df0ff3a.plugins.js
│ └── vendor
│ ├── 5f7134b6.modernizr-2.5.3.min.js
│ ├── 775b359b.jquery-1.7.2.min.js
│ └── af693f9a.jquery-1.7.2.js
├── LICENSE-MIT
├── package.json
├── readme.md
└── robots.txt
the grunt.js :
rev: {
js: 'js/**/*.js',
css: 'css/**/*.css',
img: 'img/**'
},
// update references in html to revved files
usemin: {
html: ['**/*.html'],
css: ['**/*.css']
},what else i need change for the grunt.js ?
Thanks again for the detailed test case. There is indeed an issue with the renaming of scripts.
Oddly enough, this is not coming from the usemin task (indirectly, it is) but from the rjs configuration.
You may quickly fix it by changing the rjs configuration from:
rjs: {
...
dir: 'publish/js',
...
},to
rjs: {
...
dir: 'js',
...
},What's happening:
- the rjs task with default config sets up the dir option to publish/js, which is a mistake at this point because we're in the intermediate/ directory (leading to js files compiled by rjs into intermediate/publish/)
- Those files are not reved and renamed (original name)
- They don't show up in the publish dir, cause the copy task handle the publish/ directory as something we should ignore.
- But the usemin task does a global lookup based on the filename that is going to be replaced in html. At this point, there is two occurences, one with the revved name, one with the original name.
- The usemin task then takes the first match in the returned array, and operate on that. At this point, this is the original name.
So there's a replace, but we replace something with exactly the same name (that's why they show up in the console, with the was / now output).
Thanks for all your feedbacks. I'll get it fixed asap (apparently this is mainly because of the Gruntfile generated)
We also may have other unexpected behaviours when filenames are not unique. The way the usemin task looks for files to replace needs to be enhanced and made more robust.
cool ! seems every thing working now ! just little extra config ,when you run h5bp:minify , you should add more config html:files in grunt.js :
// html minification
html: '<config:usemin>',
html: {
files: ['**/*.html']
},@eggcaker Glad to know all is working for you now! Very true for the html task, good catch. Thanks again for all your feedbacks, I'll update the docs and fix this init template to catch up with latest changes in our tasks.
you are welcome ! you guys did great job! awesome tool and I already use it to build my live site ;)
I'd like to make this section a little clearer if I may...
I also wasn't seeing my HTML file updated to point at the correct CSS files. After carefully reading the comments above and with some trial and error, I did the following:
In the grunt.js config file:
css: {
// alter "style.css" to be what you want the filename to be in the /publish directory
'css/style.css': ['css/**/*.css']
},
Now in the source index.html file, find the block in the <head> which contains the <link /> to the CSS files for your project. You need to wrap these in a comment in the following syntax:
<!-- build:css css/style.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
...altering the name of style.css (in the block) to match the name you specified in the grunt.js config file.
First of all thanks for this thread, help me a lot understanding how to deal with usemin.
I've followed all messages but I'm still stuck with css min and revv replacement.
I'm using yeoman and grunt to build my project and grunt-css plugin for using 'cssmin' instead of 'css' built-in with grunt.js
index.html
<!-- build:css styles/styles.css -->
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->
<!-- build:js scripts/scripts.js -->
<script src="scripts/vendor/jquery.min.js"></script>
<script src="scripts/vendor/handlebars-1.0.0.beta.6.js"></script>
<script src="scripts/vendor/ember-1.0.pre.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/routes/app-router.js"></script>
<script src="scripts/store.js"></script>
<script src="scripts/controllers/application-controller.js"></script>
<script src="scripts/models/application-model.js"></script>
<script src="scripts/views/application-view.js"></script>
<!-- endbuild -->grunt.js
rev: {
js: 'dist/scripts/**/*.js', // scripts/**/*.js
css: 'dist/styles/**/*.css', // styles/**/*.css
img: 'dist/images/**' // images/**
},
'usemin-handler': {
html: 'index.html'
},
usemin: {
html: ['dist/**/*.html'], // **/*.html
css: ['dist/**/*.css'] // **/*.css
},
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true
},
cssmin: {
dist: {
src: [
'app/styles/**/*.css'
],
dest: 'dist/styles/styles.css'
}
},
concat: {
dist: {
src: [
'app/scripts/**/*.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
},
min: {
dist: {
src: [
'dist/scripts/scripts.js'
],
dest: 'dist/scripts/scripts.js',
separator: '/**********/\n'
}
}Then the build project structure is:
dist/
|__scripts/
|____04216377.scripts.js
|__styles/
|____d41d8cd9.styles.css
|__index.html
Then output index.html file
<link rel="stylesheet" href="styles/styles.css"/?>
<script src="scripts/04216377.scripts.js"></script>As you see all went OK except renaming the revisioned styles in index.html that should be 'styles/d41d8cd9.styles.css
Anyone knows why?
And is the questionmark '?' in the line normal???
Note: for more information this is outputted in my console (no errors)
Running "rev:js" (rev) task
dist/scripts/scripts.js --- 04216377.scripts.js
Running "rev:css" (rev) task
dist/styles/styles.css --- d41d8cd9.styles.css
Running "rev:img" (rev) task
Running "usemin:html" (usemin) task
usemin:html - dist/index.html
scripts/scripts.js
was <script src="scripts/scripts.js"></script>
now <script src="scripts/04216377.scripts.js"></script>
Running "usemin:css" (usemin) task
usemin:css - dist/styles/d41d8cd9.styles.css
And no renaming has been done!
Thanks a lot guys!
I've found the problem.
I've got Yeoman 0.94 version and needs a fix on usemin task
The ?character at <link>is a regex mistake. You should rewrite this expression because css renaming is failing.
Found the correct workaround at yeoman/yeoman#586
If apply changes this issue is solved.
Note: apply the patch on usemin.js at /usr/local/lib/node_modules/yeoman/tasks (on OSX)