I am using grunt-contrib-concat and I need a way to automate my vendor concatenation step.
Right now, I specify manually in my GruntFile what vendor libraries should be concatenated.
Is there a way to get their names from my index.html? Using just the contrib-concat plugin and not usemin?
Any ideas?
concat: {
app: {
files: {
'dist/js/app.js': [
'src/**/*.js',
'!src/**/*.spec.js', // Exlcude the spec files.
'tmp/*.js'
]
}
},
vendor: {
src: [
'vendor/angular/angular.js',
'vendor/angular-route/angular-route.js',
'vendor/angular-bootstrap/ui-bootstrap-tpls.js'
],
dest: 'dist/js/vendor.js'
}
},
Related
Grunt novice here....what I am trying to do seems so simple, but I am at my wits end here. I am trying to concat the JS from a few separate bower components and then do the same with the CSS. Here is the relevant code from my grunt.file:
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
}
This is the last item in my config so does not need a comma after the final "}".
All the needed files are listed under "main" in their respective bower.json files. For example:
"main": [
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.css",
"dist/assets/owl.transitions.css"
],
I am positive these paths and file names are correct. The JS concats fine. The CSS does nothing. If I remove the "dest:..." line from my gruntfile (in an attempt to concat ONLY the CSS) terminal gives me the error ":Warning: You should specify "dest" and/or "cssDest" properties in your Gruntfile".
I clearly am specifying this. Help!
Finally got it to work with this:
bower_concat: {
all: {
dest: {
js: 'builds/development/js/_bower.js',
css: 'builds/development/css/_bower.css'
},
},
}
Essentially needed one more set of nested curly braces inside of "dest:". For the record you DO NOT need to specify mainFiles if they are designated in the bower_components json.
Ah, easy. You need to specify the component or library and then its mainFiles in your Gruntfile under grunt-bower-concat. Don't worry about messing with the individual components' files.
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
mainFiles: [
owlcarousel: [
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css",
"dist/assets/owl.theme.css",
"dist/assets/owl.transitions.css"
],
],
}
FYI My current bower-concat for owlcarousel looks like this so double-check your bower_components folder tree structure.
bower_concat: {
all: {
dest: 'builds/development/js/_bower.js',
cssDest: 'builds/development/css/_bower.css'
}
mainFiles: [
owlcarousel: [
"owl-carousel/owl.carousel.js",
"owl-carousel/owl.carousel.css",
"owl-carousel/owl.theme.css",
"owl-carousel/owl.transitions.css"
], // (Version 1.3.2)
],
}
I cannot seem to find an easy way to copy all the files from Polymer to using grunt-bower-task.
grunt.initConfig({
bower: {
install: {
options: {
targetDir: 'wwwroot/lib',
layout: 'byComponent',
install: true,
copy: true,
verbose: true,
cleanTargetDir: false,
bowerOptions: {}
}
}
}
I understand that only the main files defined inside each element's bower.json file get copied over. I am also aware that I could put a exportsOverride section in my own bower.json to include more files like this -
"exportsOverride": {
"*": {
"": "*.*",
"demo": "demo/*.*",
"test": "test/*.*"
}
}
But this doesn't cover all cases as some elements have more sub-folders than just demo and test. Do I have to manually look them all up and add their paths to the exportsOverride, or there's an easy way that I've overlooked?
hate to provide a sample of a fail....
FWIW recently , i had very similar issue ... worked it and failed
what i did is abandon the attempt to flatten everything out in the "dist" tag for a first polymer project. Rather i just ran minify/ugly on one or two elements leaving the HTTP2 type file structure ( deep and many many, dirs/files. )
// the process belo NG . Manual edit needed on "polymer-min.html" go end and chg the js file name
copy: {
main: {
files: [
// includes files within path
{expand: true, src: ['*html'], dest: 'dest/', filter: 'isFile'},
// includes files within path and its sub-directories
{expand: true, src: ['js/**', 'images/**' ,'css/**' ,'elements/**' ,'bower_components/**'], dest: 'dest/'},
{ src: ['tmp/csp/build-csp.html'], dest: 'dest/bower_components/cast-button-polymer/cast-button-polymer-min.html',
filter: 'isFile',
options: {
process: function (content, srcpath) {
return content.replace(/build-csp.js/g,"cast-button-polymer-min.js");
},
},
},
{ src: ['tmp/csp/build-csp-min.js'], dest: 'dest/bower_components/cast-button-polymer/cast-button-polymer-min.js', filter: 'isFile'},
],
},
},
I have the following setup in Grunt for the concat and minification of my projects css
cssmin: {
options: {
},
concat: {
files: {
'dist/app.css': [
'tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'
]
}
},
min: {
files: [{
src: 'dist/app.css',
dest: 'dist/app.css'
}]
}
},
It works fine with the exception that, as far as I can tell its removed the following import statement
#import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic");
And all 3rd party css files have relative image paths which are not resolved. I can see cssmin uses clean css which should be able to help handle these issues but after hours of searching and reading the docs I can't any clear examples or doucmentation on how to configure the above to solve this?
I used Ze Rubeus suggestion of moving my font import statement into the HTML instead (a little annoying as it means modifying a 3rd party css file). But I found the option for fixing the css paths which is
rebase: true,
relativeTo: './'
My cssmin configuration now looks like
cssmin: {
options: {
rebase: true,
relativeTo: './'
},
concat: {
files: {
'dist/app.css': [
'tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'
]
}
},
min: {
files: [{
src: 'dist/app.css',
dest: 'dist/app.css'
}]
}
}
And everything is working :)
You have to change all you import PATH depend on this directory 'dist/app.css'
And instead of css font import I advice you to use the HTML link like the following
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' type='text/css'>
make sure to change all url Path's on these directory's :
'tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'
depend on this output 'dist/app.css': because there is no task in gruntjs who correct the import Path in css files for you !
regarding your code the watch task need's to be something like so :
watch: {
css: {
files: ['tmp/*.css',
'app/theme/css/vendors/fontello.css',
'app/theme/js/vendors/revolution/css/settings.css',
'app/theme/css/styles.css',
'app/theme/css/media-queries.css',
'app/app.css'],
tasks: ['concat','cssmin'],
options: { spawn: false }
}
},
And execute this command grunt watch in your terminal to keep automatically tracking for changes in these files and apply these tasks .
The Context
I'm new to Grunt and am trying to learn a bit by modifying the meanjs boilerplate to support stylus, I would like to keep my precompiled css assets organized in modular buckets, as recommended by the current meanjs defaults.
The Question
I have the following file structure:
- app
- config
- public
- modules
- foo
- assets
- stylesheets
...
- css
...
...
How can I use Grunt to take Stylus .styl files in the public/modules/*/assets/stylesheets directory, and have them compile to the public/modules/*/css directory?
Naive Attempt:
Below is an example attempt, which didn't get very far.
stylus: {
compile: {
files: [{
dest: '../../css',
src: 'public/modules/*/assets/stylesheets/*.styl',
ext: '.css',
expand: true
}]
}
}
This results in: File ../../css/public/modules/foo/assets/stylesheets/baz.css created.
If I leave "dest" empty, it does properly compile but the output is in the assets/stylesheets folder (as expected). I'm sure there is a clean way to do this, but I don't know yet.
setting the src, dest, cwd, as well as using the hidden rename options of grunt should get stylus files in your desired format.
example:
stylus: {
compile: {
options: {
compress: true
},
files: [{
cwd: 'public/modules',
dest: 'public/modules',
src: ['*/assets/stylesheets/*.styl'],
expand: true,
rename: function(dest, src) {
var path = require('path');
var module = src.split(path.sep).slice(0,1)[0];
return path.join(dest, module + '/css/' + module + '.css');
}
}]
}
},
grunt tricks - customize file output rename
I have a bunch of various css from plugins and separate style sheets I am using, and I am trying to build a task that will combine and minify all of them. Right now I'm trying to do this with cssmin, I am not sure if I am on the right path, as this is my first time trying this, but here is what I am trying.
cssmin: {
target: {
files: {
'css/output.css': ['css/*.css', 'css/*.min.css']
},
files: [{
expand: true,
cwd: 'css',
src: ['css/output.css'],
dest: 'build/css',
ext: '.min.css'
}]
}
}
The idea is that it will take all css and min.css files in my css folder and combine them into 1 output.css then minify that build/css as a min.css file. I am not too sure if this is how this is suppose to work but this is my first attempt in trying so. The basic idea is combine and minify everything into 1 file in the bottom of my tasks (after I have auto prefixed and used uncss to strip bootstrap). I would appreciate any guidance, is this the right direction with this? This doesn't seem to work correctly, so would appreciate any help.
Thanks for reading!
I am not sure... but this works for me, and only have to include cssmin task in my grunt.registerTask line of code. It minifies all my autoprefixed .css, except the already minified versions and combine them into one big minified stylesheet. Hope it helps ^^
cssmin: {
minify: {
files: [{
expand: true,
cwd: 'src/styles',
src: ['**/*.css', '!**/*.min.css'],
dest: 'public/assets/styles',
ext: '.min.css'
}]
},
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
combine: {
files: {
'public/assets/styles/style.css': ['!public/assets/styles/**/*.min.css', 'public/assets/styles/**/*.css']
}
}
}
minify task is not necessary. When you concatenate several files, cssmin minifies the content automatically.
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
combine: {
files: {
'css/output.min.css': ['css/*.css', '!css/*.min.css']
}
}
}