My grunt file is as follows :
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
js: ['src/*.min.js']
},
babel: {
files: {
expand: true,
src: ['src/*.js','src/*/*.js','src/*/*/*.js'],
ext: '-modified.js'
},
options: {
sourceMap: false,
presets: ['babel-preset-es2015']
}
},
watch: {
tasks: ['babel']
}
});
grunt.registerTask('default', ['clean','babel']);
};
Is there a better way to configure "src" this so that it would recursively find out the js file within src folder and subfolders and transpile those file:
src: ['src/*.js','src/*/*.js','src/*/*/*.js']
Those three globbing patterns:
src: ['src/*.js','src/*/*.js','src/*/*/*.js']
...can be replaced with one:
src: ['src/**/*.js']
See the text that reads:
All most people need to know is that foo/*.js will match all files ending with .js in the foo/ subdirectory, but foo/**/*.js will match all files ending with .js in the foo/ subdirectory and all of its subdirectories.
... in the Globbing patterns of the grunt documentation.
Related
I have installed Grunt, Node and updated npm. I am trying to minify all js files into one single file using "grunt uglify". The above command creating new js files with minified code. I placed all JS files in js and also tried with src folders. Below is my code please help With this, I am new to Grunt:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'src/js',
src: '**/*.js',
dest: 'dest/.min.js'
}]
}
},
cssmin: {
my_target:{
files : [{
expand: true,
cwd: 'css/',
src: ['*.css', '.min.css'],
//src: '*.css',
dest: 'css/',
ext: '.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
}
I know it's been a year since the question was asked, but I'd like to contribute anyway for the sake of googling and finding this thread.
To achieve what you're trying to do you should NOT use expand param. Just set src and dest ones. Like this:
module.exports = function(grunt){
grunt.initConfig({
uglify: {
my_target: {
files: [{
src: "js/src/*.js",
dest: "js/main.min.js"
}]
},
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
};
Hope this helps.
I'm having trouble using grunt-contrib-imagemin, insofar as I can't get it to compress any images.
Here's my Gruntfile.js
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'css/{base,global,medium,large}.css', // All CSS in the CSS folder
],
dest: 'css/build/production.css',
}
},
cssmin: {
build: {
src: 'css/build/production.css',
dest: 'css/build/production.min.css'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'if3/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'cssmin', 'imagemin']);
}
When I run grunt from the command line, each of concat and cssmin run fine, whereas imagemin - although running without errors - returns the following message.
Running "imagemin:dynamic" (imagemin) task
Minified 0 images (saved 0 B)
For info, my folder structure is as follows.
if3\
css\
*.css
images\
*.png
*.jpg
js\
*.js
node_modules\
etc.
Gruntfile.js
package.json
*.html
The image folder currently contains 7 PNG and 2 JPG files, but I can't figure out why it's not doing anything with them.
Any help much appreciated.
Thanks
your src-properties in your concat and cssmin tasks do not contain if3. your imagemin config does. removing that should probably help...
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/build'
}]
}
}
you don't need use: dynamic {} or static {} and will works perfect.
see: Grunt imagemin running but not minifying
Using grunt-ts on my project, here is my Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ts: {
build: {
src: ['ts-src/**/*.ts'],
//compile using the requirejs module style
module: 'amd',
//write generated files to ts-out directory
outDir: '../js/ts-out',
amdloader: 'loader.js',
//generate a reference file
reference: 'reference.ts',
//generate .d.ts files
declaration: true,
options: {
comments: true, //preserves comments
target: 'es5' //emit ECMAScript5 JS
}
}
},
watch: {
files: ['<%= ts.build.src %>'],
tasks: ['ts']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-ts');
grunt.registerTask('default', ['watch']);
}
This "works", but it is generating a loader.js file that incorrectly prepends the outDir value onto the entries in the file. This results in a path for each file that contains js/ts-out, twice.
Does the amdloader option have configuration options, where I can override this?
I suspect it should be :
outDir: '../js/ts-out',
amdloader: '../js/ts-out/loader.js',
See : https://github.com/grunt-ts/grunt-ts/blob/master/Gruntfile.js#L101-L117 i.e.:
amdloadersrc: {
test: true,
src: ['test/amdloader/ts/app/**/*.ts'],
html: ['test/amdloader/ts/app/**/*.html'],
reference: 'test/amdloader/ts/app/reference.ts',
outDir: 'test/amdloader/js/app',
amdloader: 'test/amdloader/js/app/loader.js',
// watch: 'test/amdloader/app'
},
amdloadertest: {
test: true,
src: ['test/amdloader/ts/test/**/*.ts'],
html: ['test/amdloader/ts/test/**/*.html'],
reference: 'test/amdloader/ts/test/reference.ts',
outDir: 'test/amdloader/js/test',
amdloader: 'test/amdloader/js/test/loader.js',
},
amdloader takes an absolute path to the generated JS location
I am trying to automate my workflow with the help of Grunt. I have everything set up, but the watch task is not working - I can start it, but it doesn't detect changes. The problem really must be in the watch task, as I can trigger the sass task by hand and it compiles correctly without problems.
My Gruntfile looks like this:
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
'style': 'compressed'
},
expand: true,
cwd: './sass/',
src: 'style.scss',
dest: './css/',
ext: '.css'
},
dev: {
options: {
'style': 'expanded',
},
expand: true,
cwd: './sass/',
src: 'style.scss',
dest: './css/',
ext: '.css'
}
},
watch: {
sass: {
files: ['<%= sass.dev.src %>'],
tasks: ['default']
}
}
});
grunt.registerTask('default', ['sass:dev']);
};
The structure in the project directory looks like this:
Gruntfile.js
index.html
package.json
css
> style.css (created by sass task)
node_modules
> all required modules
sass
> style.scss
To me everything looks good, but as it is not working something must be wrong. My guess it that the paths following the 'expand' option are off, although I already tried other structures that didn't work either.
Because sass.dev.src equals src: 'style.scss'. The watch task configured with files: ['<%= sass.dev.src %>'] will try and watch ./style.scss and not ./sass/style.scss.
The watch task has a cwd option (options:{cwd:'./sass'}) but probably easier to just set it to watch files: ['sass/*.scss'] instead.
This is my Gruntfile.js (assets is the Bower folder):
module.exports = function(grunt) {
grunt.initConfig({
distFolder: 'dist',
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
},
dist: {
src: [
'assets/jquery/dist/jquery.js',
'assets/jquery-ui/ui/jquery-ui.js',
'assets/jsplumb/dist/js/jquery.jsPlumb-1.5.5.js'
],
dest: '<%= distFolder %>/main.js',
},
},
uglify: {
dist: {
src: 'dist/main.js',
dest: 'dist/main.min.js',
},
},
cssmin: {
combine: {
files: {
'dist/main.min.css': [
'assets/font-awesome/css/font-awesome.min.css',
'assets/jquery-ui/themes/base/jquery-ui.css',
],
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('build', ['concat', 'uglify']);
};
All works fine, but as I suspected, Font-awesome will lose it's connection with its fonts when using grunt-contrib-mincss.
Can I automate with Grunt that it will do something like;
Copy font files from assets/font-awesome/fonts/ to dist/fonts/
Rewrite url(../fonts/ to url(fonts/
Thanks in advance!
fonts, images, #imports in bower components or vendors may be relative or absolute depend on the component itself, you should config your cssmin task to rewrite relative resources to a correct path in dist path.
using following code, all resources urls will be rewritten using absolute urls.
cssmin: {
options: {
root: 'app'
},
combine: {
files: {
'dist/main.min.css': [
'app/bower_components/lib1/main.css',
'app/bower_components/jquery-ui/themes/base/jquery-ui.css',
]
}
}
}
it's important to set the root option to the base path of your input files. in your case I'm believe you should set the root option to "/" or ""
If you tell me your project structure, I can help more.
I though your project structure is something like this
/
/assets
/other_files
/dist