In my project I have included to jQuery UI.I am using Bower, Yeoman and Grunt.
I added jQuery UI: bower install jquery-ui --save .
but the jQuery UI theme was not included in Bower style components.
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css ->
Help me with this problem .
This is not issue with library . its in Grunt-wiredep which has problem in injecting dependencies which has file name like jquery-ui,socket-io,font-awesome. there is way to override it .
wiredep: {
target: {
src: '<%= jericho.client %>/index.html',
ignorePath: '<%= jericho.client %>/',
exclude: [/es5-shim.js/, /json3.js/ ,/bootstrap.css/, /font-awesome.css/ ],
overrides: {
'socket.io-client': {
main: 'socket.io.js'
},
'jqueryui-touch-punch': {
main: 'jquery.ui.touch-punch.js'
}
}
}
},
so add 'jquery-ui': { main: 'jquery-ui.js' } . in the grunt wiredep configuration.
Link: https://github.com/taptapship/wiredep/issues/86
Related
I'm trying to dynamically load some css files from a Javascript.
Snippet:
if (theme === 'testtheme' || theme === 'testtheme/') {
css =
<!-- build:css({.tmp,app}) styles/main_testtheme.css -->
'<link rel="stylesheet" href="styles/css/main_testtheme.css" type="text/css" />'
<!-- endbuild -->
;
} else {
css =
<!-- build:css({.tmp,app}) styles/main.css -->
'<link rel="stylesheet" href="styles/css/main.css" type="text/css" />'
<!-- endbuild -->
;
}
However, the grunt-build task replaces all the text between the build comments with something like:
<link rel="stylesheet" href="styles/e59b065a.main.css">
thus removing the string quotes and rendering the code invalid.
How I would like to to run:
<!-- build:css({.tmp,app}) styles/main.css -->
css = 'styles/css/main.css';
<!-- endbuild -->
should result in:
css = 'styles/e59b065a.main.css';
That would allow testing both the unminified (unbuilt) and the minified versions. Grunt build takes around 5 minutes for me so I'm trying to avoid that while developing.
Edit:
I can probably override the default blockReplacement for css (see https://github.com/yeoman/grunt-usemin#blockreplacements ) but it will make it a pain for anyone coming afterwards to try and figure out why their stylesheet is not embedded properly.
I still was not able to find an acceptable solution for this, but here's one that works, for now:
Gruntfile.js snippet:
useminPrepare: {
html: ['<%= yeoman.app %>/index.html', '<%= yeoman.app %>/includes.html'],
options: {
dest: '<%= yeoman.dist %>',
flow: {
// i'm using this config for all targets, not only 'html'
steps: {
// Here you define your flow for your custom block
cssQuoted: ['concat', 'cssmin'],
// use the option below where you have minified files that you just want to concatenate
concatjs: ['concat'],
// Note that you NEED to redefine flow for default blocks...
// These below is default flow.
js: ['concat', 'uglifyjs'],
css: ['concat', 'cssmin']
},
// also you MUST define 'post' field to something not null
post: {}
}
}
},
usemin: {
//css_name: ['<%= yeoman.dist %>/{,*/}*.html'],
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
//patterns: {
// html: [
// [ /cssHrefString\s+=\s+['"]([^"']+)["']/gm, 'Update the HTML to reference our revved/min CSS and add quotes' ]
// ]
//},
blockReplacements: {
cssQuoted: function(block){
return '\'<link rel="stylesheet" href="' + block.dest + '">\'';
},
concatjs: function (block) {
return '<script src="' + block.dest + '"></script>';
}
}
}
},
script.js snippet:
var theme = getUrlParameter('theme');
var cssHrefString;
// we need fully qualified css tags below otherwise grunt build will not be able to pick them up
if (theme === 'testtheme' || theme === 'testtheme/') {
cssHrefString =
<!-- build:cssQuoted({.tmp,app}) styles/main_testtheme.css -->
'<link rel="stylesheet" href="styles/css/main_testtheme.css">'
<!-- endbuild -->
;
} else {
cssHrefString =
<!-- build:cssQuoted({.tmp,app}) styles/main.css -->
'<link rel="stylesheet" href="styles/css/main.css">'
<!-- endbuild -->
;
}
$('head').append(cssHrefString);
The grunt config file adds a definition for concatjs - a tasks which only concatenates minified files, does not run the uglifier on them. cssQuoted which takes the string between the blocks and replaces it with a quoted "link rel=..." tag.
Make sure your grunt-usemin plugin version is up-to-date - I lost several hours trying out options with an old version (~0.1.3). The code above works with 3.0.0.
I have a project that uses the grunt yeoman angular generator and sass.
In my scss file, I have the following lines:
// bower:scss
#import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
Which were automatically generated by my yeoman generator.
In the course of putting the project together, something happened and grunt build is failing on cssmin with:
Running "cssmin:generated" (cssmin) task Warning: Broken #import
declaration of
"\bootstrap-sass-official/assets/stylesheets/_bootstrap.scss\" Use
--force to continue.
Aborted due to warnings.
Below are some relevant sections from my Gruntfile:
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
test: {
devDependencies: true,
src: '<%= karma.unit.configFile %>',
ignorePath: /\.\.\//,
fileTypes:{
js: {
block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
},
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: './bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: '<%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
sourcemap: true
}
}
},
and from my index.html
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/styles.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/clean-blog.css">
<!-- endbuild -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- endbuild -->
Not quite sure what I need to do to get grunt to find the _bootstrap.scss file and to minify it properly.
I'm assuming that the #import statement you pasted was from your index.html?
// bower:scss
#import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower
For some odd reason, you're getting scss statements injected directly into your index.html which should not be happening. What you want to make sure you're doing is compiling all of your scss files into css, and then injecting those files into the index.html. The sass target you set up inside of wiredep is probably causing the sass to get injected. Wiredep is only meant to inject the link and script tags for bower_components, it is not meant to inject sass directly into your index.html. The goal is to compile sass, and then inject the compiled css files into your index.html. You should probably remove these lines inside of wiredep:
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}bower_components\//
}
I ran into a similar issue but found that one of the css files that got injected into the index.html actually contained the #import statement inside:
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/somePackage/somePackage.css" />
<!-- endbower --><!-- build:css({.tmp,app}) styles/styles.css -->
My problem was that the somePackage.css file still contained scss statements and there is no reasonable method for running sass directly in a browser even if you run it as javascript. You could use something like sass.js or less.js but its really not recommended: Is there a SASS.js? Something like LESS.js?. Also, the 'cssmin' task will not minify files that still contain sass statements. The key here is to make sure all sass files are compiled down to css first.
After that is done, make sure that any .css files that are injected into your index.html don't actually contain scss statements. That is the main reason my the cssmin task failed for me, and ultimately caused 'grunt build' and 'grunt serve:dist' to break before it finishes the minification/uglification processes.
In my gruntfile.js I am using bower install to create the necessary script tags in my index.html for all my js libraries. My grunt file entry looks like this:
bowerInstall: {
target: {
src: ['wwwroot/index.html'],
cwd: '',
dependencies: true,
devDependencies: true,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
My index.html gets correctly updated from my index.html.tpl as seen here:
<head>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<link rel="stylesheet" type="text/css" href="wwwroot/app/styles/style.css" />
What I want to happen is to copy all js library files to a specific lib directory, and then link them from there. Can this be accomplished with bower install or is there another grunt plug-in I should be using? The bower-install plugin seems popular but I can't find much documentation for it.
You should try to use grunt-bower along with grunt-bower-install. You can configure bower to install copy files to specific folders. It will look like this:
bower: {
dev: {
dest: 'lib/',
js_dest: 'lib/js',
css_dest: 'lib/styles'
}
}
Then if you run the task:
grunt bower
You will have something like this in your lib folder:
/js
/package1
package1_file1.js
package1_file2.js
/package2
package2.js
/styles
/package1
package1.css
/package2
package2.css
Add a .bowerrc file next to your bower.json. If the file is already in there change its content from:
{
"directory": "bower_components"
}
to
{
"directory": "you/new/lib/path"
}
Re-install your Bower components:
bower install
Then call the Grunt task:
grunt bowerInstall
Is there a way to combine and minify all bower installed libraries into 1 file automatically?
First I tried the most basic approach: combine all .js files from all subdirectories:
uglify: {
options: {compress: true},
my_target: { files: {
'vendor.js': ['bower_components/**/*.js'],
} } }
But this is obviously a bad approach. It also doesn't work because of too many errors.
I manually deleted all the files and kept only 1 (main) file that each library has, and it worked.
Is there a way to do this all automatically?
Also, is it advisable to do it? (i.e. combine all vendor libraries into 1 file)
I recommend the combination of 2 nice grunt libraries, Wiredep and Usemin:
Wiredep: Load all dependencies of bower identified in bower.json inside your html automatically
Usemin: Detect all src inside two comments tags and all that source are minified and concatenated in dist folder, below are a little example of a grunt files using this packages, is based on the generator of angular to yeoman this is only a brief of that grunt
Grunt
wiredep: {
options: {
cwd: 'appFolder'
},
app: {
src: ['htmlCollections'],
ignorePath: /\.\.\//
}
},
useminPrepare: {
html: 'htmlCollections',
options: {
dest: 'distributionFolder',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
usemin: {
html: ['distributionFolder+HtmlFiles'],
css: ['distributionFolder+cssFiles'],
js: ['distributionFolder+javascriptFiles']
}
HTML
<!doctype html>
<html lang="en" ng-app="MobileDev" id="ng-app">
<head>
<!-- build:css(app) styles/vendor.css -->
<!-- bower:css -->
//This gonna be generated for the grunt by dependencies in bower
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
//All the script inside this gonna be concatened and minified in
//the dist folder by the name of main.css
<link type="text/css" rel="stylesheet" href="styles/app.css"/>
<!-- endbuild -->
</head>
<body>
<!-- build:js(app) scripts/vendor.js -->
<!-- bower:js -->
//This gonna be generated for the grunt by dependencies in bower
//And in distribution all bower components added gonna be minified by usemin in
//vendor.js
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
//All the script inside this gonna be concatened and minified in the dist
//folder by the name of scripts.js
<script type="text/javascript" src="scripts/numero1"></script>
<script type="text/javascript" src="scripts/numero2"></script>
<!-- endbuild -->
</body>
Just needed wiredep
uglify: {
options: { compress: true },
my_target: {
files: { 'public/vendor.js': require('wiredep')().js
} } },
cssmin: {
minify: {
files: { 'public/vendor.css': require('wiredep')().css
} } },
I am trying to build my files using usemin. my setup is like this: index.html - /en/bunchofhtmlfiles.html - /de/bunchofhtmlfiles.html - /scripts/apps.js
index.html
-- /en/ -> html files
-- /scripts/ -> js files
How do i write the build:js blocks?
In index.html its clear:
<!-- build:js scripts/... -->
<script src="scripts/...></script>
<!-- endbuild -->
But what do i write in the subdirs?
<!-- build:js ../scripts/... -->
<script src="../scripts/...></script>
<!-- endbuild -->
Puts the scripts in a directory "before" root.
<!-- build:js scripts/... -->
<script src="scripts/...></script>
<!-- endbuild -->
This leaves the files with the wrong paths to the js files but the js files get placed correctly.
Here is the gruntfile.js part for usemin:
useminPrepare: {
html: ['<%= yeoman.app %>/{,*/}*.html', '<%= yeoman.app %>/en/*.html'],
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html', '<%= yeoman.dist %>/en/*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
There is no need to touch the Gruntfile.js
You need to go threw the whole index.html and change the paths inside the uncommented areas.
e.g.
root/scripts/main.js
and your index.html
root/en/index.html
you need to change the index.html from
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
Into
<!-- build:js ../scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
Same for your other paths