This question is similar to https://stackoverflow.com/questions/10316098/how-to-configure-html5boilerplate-build-script-to-get-script-src-attributes-repl but I'm not using a php prefix and it happens both to CSS and JS
In my original html I have
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="css/style.css">
<!-- end CSS-->
and
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
After I build successfully, the css and js folder have a new minified concatenated and renamed .css and .js files but the html have the same src=""s just without the comments.
Even worse, the modernizr-2.0.6.min.js file is not copied to the publish folder which should be since it's not concatenated to the eg fe30b2e.js file (since it's in the header and the rest of js at the end)
The publish/css folder has a a109b0e.css minified file and a copy of the original style.css file which doesn't seem right.
I'm using the latest version of the build script (I'm guessing that clicking the ZIP button in GitHub downloads the latest version) and OS X 10.6.8
UPDATE: I tried running the build script against a clean and just downloaded versions of the boilerplate and the same happens, the src attributes don't update so I guess there is a bug in the build script.
Related
My dev server is running on node live-server. My prod will be a LAMP server.
I have normalize.css inside my node_modules server.
In my index.html I have
<link rel="stylesheet" href="/node_modules/normalize.css">
<link rel="stylesheet" href="css/styles.css">
I don't want files linked to node_modules directory.
I want something like
<link rel="stylesheet" href="css/normalize.css">
Is this doable? I have lot of other css and js files like this.
Update 1
Let me clarify, this app is not a node app nor a php app, It has only html, css and js files. Everything runs on client side, But.. we want to leverage the latest client side dev tools for JS and CSS and upload the final build to prod server.
There are lots of possible solutions. I can suggest using a task runner(gulp) which will copy these static files to a public directory like dist/assets.
Install gulp on your machine
npm install --save-dev gulp
Create a gulpfile.js file in your root directory with following code.
var gulp = require('gulp');
gulp.task('default', function () {
gulp.src('/node_modules/normalize.css')
.pipe(gulp.dest('./dist/assets'));
});
Run gulp
gulp
Update your index.html as below
<link rel="stylesheet" href="/dist/assets/normalize.css">
Please go through the documentation of Gulp for more information
You can also try Grunt or Webpack
You could use Webpack for bundling, which would copy css resources to the dist and replace references to it. It doesn't support html files as entry points though, so you'd need to work around that by probably using html-webpack-plugin.
anyway, as was mentioned by others - server decisions are weird.
I am using grunt build to copy files from production to build. While working I am using local bootstrap css, however in build I need CDN url to be replaced for bootstrap.
<!--build:css http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- endbuild-->
First of all is this possible? Grunt build is giving error for http path while using usemin.
Thanks.
Got temporary solution to this.
My grunt build was perfect except http:// url for bootstrap. So i used --force (grunt build --force) command to build my project.
This gave me warning but build the project as per my requirements and CDN url for bootstrap.
I had a previous yeoman version working with angular-generator. I updated everything, including node, npm, bower and yeoman.
Before this update I had app/bower_components now they are siblings app and bower_components. When running grunt serve or grunt build bower links everything back to:
<script src="bower_components/angular/angular.js"></script>
to get it working it should be
<script src="../bower_components/angular/angular.js"></script>
but grunt changes it back. I'm thinking the issue is with where grunt picks this route from.
I created a second project with the new version of generator and compared bower.json, .bowerrcand gruntfile.js and everything seems ok but I still don't get a correct link thus build does not work though serve runs perfectly.
Any hint on what should I change to make it work?
I had to change the comment in html
<!-- build:css(.) styles/vendor.css -->
instead of
<!-- build:css styles/vendor.css -->
and
<!-- build:js({.,app}) scripts/vendor.js -->
instead of
<!-- build:js scripts/vendor.js -->
Notice the (.) and {.,app} in each case. The second one is different because I want another script located in app/scripts/lib
<script src="scripts/lib/other.script.js"></script>
Given grunt production (minify, concatenate) and grunt development (don't minify, don't concatentate) tasks, how can I have my index.html file serve the appropriate files?
For production, index.html it should only have one <script> tag and one <link> tag and for development many.
How do you get grunt to do that?
You're looking for grunt-usemin, which will allow you to introduce comment blocks around where your minified styles and scripts should go.
https://github.com/yeoman/grunt-usemin
<!-- build:js dist/master.min.js -->
<script src="vendor/jquery.js"></script>
<script src="vendor/underscore.js"></script>
<script src="lib/base.js"></script>
<!-- endbuild -->
Tool to read html file and save all Javascripts found into one?
I'm new to Yeoman. I've generated an Ember.js project with
$ yo ember
so I needed to install Twitter Bootstrap separately running
$ bower install bootstrap
but running
$ grunt build
does not deploy the component css files to the dist/styles directory in the same way that it does for js files to dist/scripts
How do I include component css files in my project distribution and reference them in my html?
When you are integrating the css in your html files you usually do it like this (I use bootstrap as example):
<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">
If you run grunt buildthis won't deploy the css files. To have them deployed in your project wrap it in the usemin comments, just like you do with the javascript stuff:
<!-- build:css styles/bootstrap.css -->
<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">
<!-- endbuild -->
This will then deploy this css file as styles/bootstrap.css in your dist folder and update the references in your html files just like it does with the javascript references.
I recently added support for Twitter Bootstrap to the generator, so if you upgrade to the latest version you will get a prompt for it.
In general, if you want to reference components, you should not copy them around to the styles or scripts folder but link directly to the components folder, e. g.
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
Otherwise, you lose all the benefits of using a package manager except for the easier initial installation.