I'm trying to get Bower to work within my Drupal projects. In the root of my project I have a bower.json and .bowerrc file.
Bower components are being installed in sites/all/themes/mytheme/libraries.
I've setup grunt-wiredep to automatically inject my bower components in my html.tpl.phpfile, like this:
wiredep: {
task: {
src: 'sites/all/themes/mytheme/templates/html.tpl.php'
}
}
When using grunt wiredep, the plugin injects the following path to my index.tpl.php file:
<script src="../libraries/jquery/dist/jquery.js"></script>
Where it should be this:
<script src="sites/all/themes/mytheme/libraries/jquery/dist/jquery.js"></script>
I've tried adding directory: 'sites/all/thems/mytheme'; to the wiredep task, but then I get the error that my dependencies are not installed.
Anyone can help me out?
It seems I got it working now. Here's what I did:
1) I ignored the first part of the path: ../
2) For html files, I replaced the references to the js and css dependencies. I added sites/all/themes/mytheme/ to the path.
Here is what my wiredep task now looks like:
wiredep: {
task: {
src: 'sites/all/themes/mytheme/templates/html.tpl.php',
ignorePath: '../',
fileTypes: {
html: {
replace: {
js: '<script src="sites/all/themes/mytheme/{{filePath}}"></script>',
css: '<link rel="stylesheet" href="sites/all/themes/mytheme/{{filePath}}"/>',
}
}
}
}
}
Related
Wiredep is altering the bower dependencies in index.html.
It changes bower_components/modernizr/modernizr.js
to
../../../bower_components/modernizr/modernizr.js
Why is it doing this? How to change it?
wiredep: {
app: {
src: ['src/main/webapp/index.html'],
exclude: [/angular-i18n/, /swagger-ui/]
},
test: {
src: 'src/test/javascript/karma.conf.js',
exclude: [/angular-i18n/, /swagger-ui/, /angular-scenario/],
ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts
devDependencies: true,
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
}
Wiredep adds the '../../../' if your index.html file is nested in another folder.
For example my index.html is within my templates/src/index.html
As should be your bower_components should be in your root file so wiredep would be linking the files correctly if your setup is like the above.
If not you need to indicate to wiredep where your index.html path is when you run wiredep.
Again my example I run wiredep --src templates/src/assets/index.html
Using the wiredep CLI this is easier to do if you just use the command line to link rather than gulp.
Looking at your src location wiredep is linking the files correctly if your bower_components are where they should be in the root of your work directory.
I have setup a uncss grunt task.
my html files are in the 'public' folder
my css ares in 'public/css'.
I setup my grunt task like so:
uncss: {
dist: {
files: {
'faq.min.css' : ['public/faq.html']
}
}
}
I get an error saying:
Fatal error: UnCSS: could not open /css
I do import my css like so in my html page:
<link href="css/faq.min.css" rel="stylesheet" />
I've tried setting up htmlroot, csspath, but nothing seems to work.
if I set
csspath: 'css'
it adds an extra css to the path.
/homepage/public/css/css/faq.min.css
anyone can help?
I want to organize my HTML, JS, and LESS by module. I'm already using Grunt to compile *.js and *.html from my source folders.
So I configured grunt as follows:
grunt.initConfig({
less: {
ALL: {
files: { 'compiled.css': '**/*.less' }
}
}
}
But this runs into a major problem: constants and mixins from my /helper/*.less files are not accessible to other .less files.
It seems like grunt-contrib-less compiles each individual .less file, and then combines the output, but doesn't compile anything "globally".
The only solution I can think of is to create and maintain a master.less that #imports each individual .less file. But I'm trying to achieve an extremely modular build process, and I don't have to list any HTML or JS files, so I'm really hoping to find a *.less solution too!
Thanks to #seven-phases-max for the following answer!
less-plugin-glob
Allows you to use wildcards in #import statements! Works perfectly!
// master.less
#import "helpers/**/*.less";
#import "modules/**/*.less";
And all you need to add to your Grunt configuration is the plugins option:
// Gruntfile.js
grunt.initConfig({
less: {
'MASTER': {
src: 'master.less',
dest: 'master.css',
options: {
plugins: [ require('less-plugin-glob') ]
}
}
}
});
And, don't forget, npm install less-plugin-glob.
Here's one way to achieve an effortless development experience.
However, it requires a generated file and a custom task.
Auto-generate the master.less file
Create a task that generates master.less by writing an #import statement for each *.less file:
grunt.registerTask('generate-master-less', '', function() {
generateFileList({
srcCwd: 'modules',
src: '**/*.less',
dest: 'less/master.less',
header: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
footer: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
template: '#import "<%= filename %>";\n',
join: ''
});
});
function generateFileList(options) {
var _ = grunt.util._;
var files = grunt.file.expand({ cwd: options.srcCwd }, options.src);
var results = files.map(function (filename) {
return _.template(options.template, { 'filename': filename });
});
var result = options.header + results.join(options.join) + options.footer;
grunt.file.write(options.dest, result);
}
Then, use grunt-contrib-less to just build master.less.
I'm experimenting with grunt/bower for a project and I have the following content structure:
content
css
js
I've got grunt/bower working on my own files, but I'm trying to incorporate jquery now and the bower task keeps putting jquery in content/js/dist/jquery.js where I'd rather have content/js/jquery.js. In other words, I want to strip / ignore the dist folder when copying the file. So far, my task looks like this:
bower: {
install: {},
dev: {
dest: 'Content',
js_dest: 'Content/js',
less_dest: 'Content/css',
css_dest: 'Content/css',
options: {
packageSpecific: {
"jquery": {
dest: 'Content/js'
}
}
}
}
},
How can I tell the bower task to copy the dist/jquery.js from the jquery package file to the specific path content/js/jquery.js in my app?
You can use the keepExpandedHierarchy option (flattened output structure) in order to achieve this behavior. You can set is specifically on for jquery:
bower: {
install: {},
dev: {
dest: 'Content',
js_dest: 'Content/js',
less_dest: 'Content/css',
css_dest: 'Content/css',
options: {
packageSpecific: {
'jquery': {
keepExpandedHierarchy: false
}
}
}
}
}
When running grunt bower the jquery.js file is copied to Content\js\jquery.js:
>grunt bower
Running "bower:install" (bower) task
Running "bower:dev" (bower) task
Content\js\jquery.js copied.
Done, without errors.
I want to add a grunt task (specifically angular-template) to my lineman application.js file. There is some documentation found here and here. However, it just tells me to add the grunt task to loadNpmTasks. The problem is that from a fresh project created using lineman, my application.js file does not have a loadNpmTasks array, nor do the comments point out where I should put it. Both examples I have found in the documentations do not show what the application.js file should look like in it's entirety.
The application.js file should look something like this (obviously the src/dest options are not configured correctly:
module.exports = function(lineman) {
return {
loadNpmTasks:['grunt-angular-templates'],
ngtemplates: {
app: {
src: '**.html',
dest: 'templates.js'
}
}
};
};
Then to run the task:
lineman grunt ngtemplates