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.
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.
how to make semantic ui framework "right-to-left" supported ? is there
anyway to make it rtl support in installing steps or not ?
You can enable RTL support under the following scenarios:
1. Fresh Installation
go to the document root of your project and install semantic-ui through npm
npm install semantic-ui --save
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
in your terminal change directory to semantic directory
cd semantic/
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder, now a very important final step is to reference the RTL version of semantic-ui css file in your index.html or web page as following:
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
2. Existing Installation
in your terminal change directory to semantic directory
cd semantic/
Clean the destination folder using the gulp task provided by semantic-ui framework
gulp clean
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder.
Now you need to replace the reference in your html page from
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">
to
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
first:
navigate to your project root and then fire: npm install semantic-ui --save
and wait for all done.
second:
edit semantic.json file (located in project root) and change "rtl": false to "rtl": true
third:
navigate to semantic dir(cd semantic) and fire: gulp build and then gulp watch.
Or if you where not installing it by npm and gulp, you may get the rtl versions from RTLCSS website. They also provide a cdn, or you can download the css and js file and use them in your sources.
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>
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.