I have the following directory structure:
--development
-js
-pages
--js
-pages
I'm trying to take all files in development/js/pages and output them js/pages and minify them using grunt uglify but still keep seperate files - I don't want to combine all the files together. I've tried the following:
build: {
src: 'development/js/pages/*.js',
dest: 'js/page',
options: {
sourceMap: true,
compress: true,
mangle: true
}
}
but this gives me an error: unable to write js/page file
Then I tried this, which is on the uglify documentation:
build : {
files: [{
cwd: 'development/js/pages',
src: '*.js',
dest: 'js/page'
}],
options : {
sourceMap: true,
compress: true,
mangle: true
}
}
but this just gives me this error for each file in development/js/pages:
source File "filename.js" not found
and then another error saying Destination (js/page) not written because the source files are empty.
Any ideas why?
For anyone else looking the second option above almost worked but I needed to remove the options block and include expand in the files block:
pages: {
files: [{
expand: true,
cwd: 'development/js/page',
src: '*.js',
dest: 'js/page/',
ext : '.min.js',
}]
}
I wanted to answer with another option.
Here is how I write my Uglify Grunt task incase you want to keep your options. It's setup to read as (dest : src), I also concat all my library files in task prior to Uglify.
-
uglify: {
options: {
// the banner is inserted at the top of the output
banner: '/* \n Site: <%= pkg.name %> \n Version: <%= pkg.version %> \n Build Date: <%= grunt.template.today("mm-dd-yyyy") %> \n */\n \n'
},
site: {
files: {
'./_build/js/lib/lib.min.js': ['<%= concat.site.dest %>'],
'./_build/js/app/app.min.js': ['./_build/js/app/app.js']
}
}
},
Related
I am writing grunt-contrib-copy task to copy from source to dest. But no files are copied. Even there are no errors. I am not able to understand what is happening.
copy:{
index: {
files: [
{
src: '<%= devDir %>/index.html',
dest: '<%= buildDir %>/index.html',
expand: true,
flatten: true,
}
]
}
}
<%= devDir %> is defined to correct folder and <%= buildDir %> is also defined.
Any help?
If you are giving wrong source path. Then grunt-contrib-copy will just return without error.
Always the path is reference from node-module where these grunt utils are installed.
We are trying to compile our sass files to css files, however we want to compile each individual sass file into an individual css file (one-to-one).
For example our product_view.scss should have a product_view.css.
However all configurations we have tried create one css file for everything called styles.css in our "out/css" folder.
sass: {
dist: {
options: {
compass: true,
style: 'expanded'
},
files: [{
expand: true,
cwd: '<%= pkg.src %>/assets/sass',
src: ['*.scss'],
dest: '<%= pkg.src %>/assets/media/out/css',
ext: '.css'
}]
},
},
I use grunt-contrib-compass (Compass) to compile my SASS, which has some nice extras. For example, compass includes a reset utility you can use by using
#import 'compass/reset';
But disregarding that, compass also outputs every file individually (as long as it does not start with _ which are files that can be included but won't be compiled by themselves). Here is the setup I use in my gruntfile:
compass: {
'default': {
options: {
sassDir: "css/sass/",
cssDir: "css/",
outputStyle: "compressed"
}
}
}
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 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
I have a Gruntfile running concat and uglify with specific options (i.e. mangle toplevel variables) and then I use sed to update the references to the minified files in index.html. This solution works but is not very maintainable because of sed. I was trying to use usemin instead but I could not figure out how to define my own custom steps with the right options for uglifyjs and the doco lacks in examples to do that. I tried to use the same uglify task I had written before:
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
mangle: {
except: ['$', 'd3'],
toplevel: true
}
},
build: {
src: 'demo/js/<%= pkg.name %>.js',
dest: 'demo/js/<%= pkg.name %>.min.js'
}
},
useminPrepare : {
html : 'src/index.html',
options: {
flow: {
steps: {'js' : ['uglify'] }
}
}
}
but I am getting this error:
Warning: Cannot find module 'path-to-module\node_modules\grunt-usemin\lib\config\uglify' Use --force to continue.
Is it possible to do this and if so, what am i doing wrong here?
Try replacing uglify with uglifyjs in your flow options.