The current project structure is somewhat like this:
-index.html
|
-bower.json
|
+-bower_components
The proposed project structure will add a few more static html files in the project root. Till now I have been managing all the frontend dependencies in bower.json and had it automatically included in index.html using the grunt-wiredep task. But with new files getting added, each file will have different set of dependencies.
-index.html
|
-file-with-some-other-bower-dependency.html
|
-bower.json
|
+bower_components
What would be an efficient way of managing these files with different bower dependencies?
You can do two different task, each with their own dependencies (bowerJson) :
grunt.initConfig({
wiredep: {
app: {
src: 'index.html',
"bowerJson":{
"dependencies": {
"jquery":"=2.1.3",
...
}
}
},
app2: {
src: 'file-with-some-other-bower-dependency.html',
"bowerJson": {
"dependencies": {
"bootstrap": "~3.0.0",
...
}
}
}}
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.
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!
Seems this is not solved besides being a recurrent question.
This is my folder structure:
project/
|
|--src/
| |--images/
| +--styles/
| +--style.css
|
+--build/
|--images/
+--style.min.css
Note how src/styles/style.css will reference url(../images/image.png) while the minified version build/style.min.css should reference url(images/image.png)
What combination of options for cssmin or clean-css can achieve this?
My current configuration:
cssmin: {
target: {
files: {
'build/style.min.css': 'src/styles/style.css'
}
}
}
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'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'
}
}