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'},
],
},
},
Related
I have a branding application where I would like to have this output:
/branding/
/default/
default.css
/brand1/
brand1.css
/brand2/
brand2.css
This one should be output from a branding folder with same structure but with .less files
So I would like to do something like this:
less: {
production: {
options: {
},
files: {
'dist/branding/**/*.css': 'branding/**/*.less'
}
}
}
I just seen examples on this where they all go to same folder, but I want to keep this dynamic because in my case there is like a ton of brandings, and the branding folders have more than just a css file, they also have other artifacts like images and so on.
Any suggestions?
If I understand you correctly you want LESS files under branding compiled to a dist/branding folder and to keep the folder structure.
To do that you would do something like this:
files: [
{
expand: true, // Recursive
cwd: "branding", // The startup directory
src: ["**/*.less"], // Source files
dest: "dist/branding", // Destination
ext: ".css" // File extension
}
]
You can visit http://rajdeepdeb.me/less-to-css-grunt-for-multiple-files/
Add the following configuration in your grunt file
...rest of the grunt configuration,
files: [{
expand: true,
cwd: '/',
src: ['**/*.less'],
dest: '/',
ext: '.css',
extDot: 'last'
}],
... rest of the grunt configuration
I have the following snippet in my Gruntfile.js:
imagemin: {
options: {
optimizationLevel: 7,
cache: false
},
dist: {
files: [{
expand: true,
cwd: 'Assets/img/',
src: ['**/*.{png,jpg,gif}', '!optimised/*.*'],
dest: 'Assets/img/optimised/'
}]
}
}
When I run grunt imagemin the files in /optimised get optimised again, what's the correct pattern to make sure I exclude whatever files I have in my 'optimised' folder?
I've tried the globbing pattern ! that's used to negate a match but can't make it work.
Just found the answer, maybe this might help someone else as I couldn't find anything like it on SO.
src: ['**/*.{png,jpg,gif}', '!optimised/**']
More about globbing patterns: http://gruntjs.com/configuring-tasks#globbing-patterns
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']
}
}
}
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'
}
},
I am attempting to use the grunt-contrib-less grunt task to compile my less files to css. What I would like to do is compile them inline, so that each .less file creates a single .css file.
Workflow:
1) Initial file system:
someFolder2
joe.less
rachel.less
someSubFolderA
jake.less
bob.less
someFolder4
someSubFolderB
ally.less
2) run grunt less
3) File system:
someFolder2
joe.less
rachel.less
joe.css
rachel.css
someSubFolderA
jake.less
bob.less
jake.css
bob.css
someFolder4
someSubFolderB
ally.less
ally.css
I have played around with various options but I can't figure out how to do this. Any suggestions would be greatly appreciated. This is the starting point grunt task I have been using:
less: {
paths: [
"src/someFolder2/**/*.less",
"src/someFolder4/**/*.less"
],
options: {
// outputSourceFiles: true
// compress: true,
// sourceMap: true,
// sourceMapFilename: "jake.txt"
// outputSourceFiles: true
}
}
This will (I think) concat all of the less files into a single CSS file.
You have to define task for grunt
options: {
paths: ["<%= cfg.dist %>/src/less"],
sourceMap: true,
rootpath: "<%= cfg.dist %>/",
relativeUrls: false,
cleancss: false
},
test: {
files: [
{
expand: true,
cwd: '<%= cfg.dist %>/src/less/',
src: ['*.less'],
dest: '<%= cfg.dist %>/build/css/',
ext: '.css'
}
]
}
/src/less/ - location of your less files
/build/css/ - folder where css will be generated