Grunt - wiredep changes bower dependencies - gruntjs

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.

Related

Using GruntJS to delete old files

Hello people of the world. I've been trying to automate my grunt workspace for a static web app. An example of my file structure is below. My current grunt setup watches for changes in files in the src folder, and if there is a change, it processes and updates only the files that have changed using grunt-newer, and puts them in the minified folder.
Let's say that I delete styles.scss from the src folder. Then I also need the corresponding styles.css to get deleted. Is there any way that I can automate this with Grunt? As shown in the problem above, I also need it to know that styles.css in the minified folder corresponds to styles.scss in the src folder.
File structure:
src
styles.scss
index.haml
minified
styles.css
file.html
Edit: Something like this: https://github.com/tschaub/grunt-newer/issues/15
Note that there is no solution to that issue
You can do something like this on your GruntFile:
sass: {
dist: {
files: {
'style/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['clean','sass'],
options: {
event: ['deleted'],
},
}
},
clean: {
dist: {
files: [{
src: [
'dist/*.css'
]
}]
}
}
As it, if you delete (and only deleted) a .saas file, your dist folder will be automaticly cleaned and your sass file rebuild.
It use:
grunt watch: https://github.com/gruntjs/grunt-contrib-watch
grunt saas: https://github.com/gruntjs/grunt-contrib-sass
grunt clean: https://github.com/gruntjs/grunt-contrib-clean
A nice tutorial: http://ryanchristiani.com/getting-started-with-grunt-and-sass/
Hope this help!

Wrong path to bower components after using grunt-wiredep

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}}"/>',
}
}
}
}
}

Ignore package target path when using grunt-bower

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.

How to set CSS Source Map output destination when grunt-contrib-less is used

I am using grunt-contrib-less for compiling less files.
I have grunt locally installed at root of project folder.
The css files are located at qa1/avinash/html5/phase1/css/ path from root of project folder.
So this is the path i am specifying for cwd (current working directory), src and dest parameters of the grunt-less task. there are no issues in compilation of css and source map.
The only issue i face is that the source map is generated in the same folder of gruntfile. but my generated css is at the dest path i specified. since the css and source map are at different locations i have to manually edit the less path references in source map and bring it to the generated css directory. or use sourceMapURL to specify the source map location ../../../../../style.css.map(backwards). Both ways are not convenient.
So can anyone help me how to specify the source map output destination path like we specify for destination path for generated css something like
sourceMapDest: 'qa1/avinash/html5/phase1/css/'
--
currently used Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
less: {
options: {
sourceMap:true,
sourceMapFilename: "style.css.map",
sourceMapURL: '../../../../../style.css.map'
},
src: {
// no need for files, the config below should work
expand: true,
cwd: "qa1/avinash/html5/phase1/css/",
src: "style.less",
dest: "qa1/avinash/html5/phase1/css/",
ext: ".css"
}
},
watch: {
js: {
files: ['qa1/avinash/html5/phase1/css/'],
tasks: ['default'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less']);
};
The sourceMapFilename option may include a path part as well.
I.e. just change it to:
sourceMapFilename: "qa1/avinash/html5/phase1/css/style.css.map"

Is it possible with Grunt to merge all js/css files in a specific folder in to one js/css file?

I'm new with Grunt and I wasn't able to find what I'm looking for.
I have this folder's structure configuration :
app/
public/
assets/
... some javascript/css libs like jQuery, Bootstrap, etc
css/
js/
img/
What I'd like to do is compress all the js files in public/assets/ into one assets.js file that would be in js/assets.js, and do the same for all the css files into assets.css in css/assets.css.
Moreover, I'd like those two assets.js/css file to be compressed.
A link to a solution or some start of a solution is all I need.
Thank you!
Firstly you need to concatenate your files and then run them through a minifier. Grunt has plenty of plugins that will do these things but some of the more popular ones are grunt-contrib-concat, grunt-contrib-uglify and grunt-contrib-cssmin.
These tasks have plenty of options available to taylor them to your needs but this should help you get started.
As sample configuration for the concat task would be something like:
grunt.initConfig({
concat: {
options: {
separator: ';',
},
js: {
src: ['public/assets/a.js', 'public/assets/b.js', 'public/assets/c.js'],
dest: 'public/js/assets.js',
},
js: {
src: ['public/assets/a.css', 'public/assets/b.css', 'public/assets/c.css'],
dest: 'public/css/assets.css',
},
},
});
Then for your minify js task:
uglify: {
js: {
files: {
'public/assets/js/assets.min.js': 'public/assets/js/assets.js'
}
}
}
And finally, css minify task:
cssmin: {
files: {
'public/assets/css/assets.min.css' : 'public/assets/css/assets.css'
}
}

Resources