We Keep Coding

How to read an external file list with grunt

I'm trying to concatenate and then babelify and uglify files with Grunt.
I'd like to read an external file list, from a file where the files are written one for each line, newline separated.
I'm trying to use the following GruntFile.js, but Grunt says (after I added the src=['<%= jsFiles.toString().split("\n") %>'] line):
Running "browserify:dist1" (browserify) task
Warning: An error occurred while processing a template (Invalid or unexpected token). Use --force to continue.
Where is the error?
This is the GruntFile.js
module.exports = function(grunt) {
grunt.initConfig({
jsFiles: grunt.file.read('scripts/s.list'),
env: {
prod: {
NODE_ENV: 'production'
}
},
browserify: {
dist1: {
options: {
transform: [
['babelify', {presets: ['es2015']}]
]
},
src: ['<%= jsFiles.toString().split("\n") %>'],
dest: '/WebContent/js/libs/s.bundle.js'
},
},
uglify: {
my_target1: {
files: {
'/WebContent/js/libs/s.bundleuglified.js': ['/WebContent/js/libs/s.bundle.js']
}
},
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-env');
grunt.registerTask('default', ['release']);
grunt.registerTask('release', ['env', 'browserify', 'uglify']);
};
Edit: I added a backslash to \n and the error has gone, but the babelify task gives me an empty file...
Edit2: I was able to read the file list using the following two lines at the beginning of the GruntFile.js
const jsFiles = grunt.file.read('scripts/s.list');
const jsFilesArray = jsFiles.toString().split("\n");
and then
src: jsFilesArray.slice(0, jsFilesArray.length-1),
because the last element was '' and it gave the error Warning: must provide pattern” as Beniamin H suggested.
Edit3: I found that the babelify task was reading the files in alphabetical order, so I had to first concat them, as explained here, and then babelify and uglify

You don't need to use any '<%= %>'. The file is read synchronously into jsFiles property and it can be used immediately. You may want to specify encoding for grunt.file.read to get a string: https://gruntjs.com/api/grunt.file#grunt.file.read

Referencing a module / script when using npm and grunt

I'm looking into npm, grunt and bower, and I've made my first task which looks like this.
module.exports = function(grunt){
grunt.initConfig({
concat: {
options: {
separator: ';',
},
dist: {
src: ['node_modules/jquery/dist/jquery.js', 'node_modules/handlebars/dist/handlebars.js'],
dest: 'dist/scripts.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
I was wondering if there's an easier/better way of adding the scripts. So that instead of typing the whole path you could just do src: [jquery, 'handlebars'],
and if bower is of any use regarding this?
Thank you.

Error when trying to use grunt-contrib-uglify: "src files were empty"

I have the following Gruntfile.js:
module.exports = function(grunt) {
var config = {
pkg: grunt.file.readJSON('package.json'),
/* Some other tasks... */
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
def: {
files: {
'out/src.js': 'out/src.min.js'
}
}
}
};
grunt.initConfig(config);
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', [/* <other-tasks>, */ 'uglify:def']);
};
Folder structure is as follows:
project
|
+-out (folder)
+-Gruntfile.js
Important: I run grunt from the project folder.
When running grunt, there is a task before uglify:def which is responsible for generating src.js into project/out.
When I run grunt I can see src.js being generated into project/out, but when Grunt runs uglisy:def I get the following error:
Running "uglify:def" (uglify) task.
Destination out/src.js not written because src files were empty.
No files created.
What am i doing wrong?
Log
When running with --verbose I get:
Running "uglify:def" (uglify) task
Verifying property uglify.def exists in config...OK
Files: [no src] -> out/src.js
Options: banner="/*! My Pack 2015-07-19 */\r\n", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="
min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8=false, quoteStyle=0
>> Destination out/src.js not written because src files were empty.
>> No files created.

I've a configuration like the following, and it works fine for me.
// uglify javascript
uglify: {
dev: {
options: {
mangle: true
},
files: {
'js/dest.min.js': 'js/source.js'
}
}
},
Probably you confused the destination with the source. Try to switch them.

It were happening due to, you are not registering above given tasks.
OK, lets start with concatenation in grunt:
concat: {
css: {
src: ['./assets/css/*.css', './assets/css/**/*.css'],
dest: './dist/css/style.css'
},
js: {
src: ['./assets/js/*.js', './assets/js/**/*.js'],
dest: './dist/js/script.js'
}
},
so, this concat is supposed to collect all css files from above given url / directories and concatenate to given destination in one place and so with js.
this will be simple concatenated style.css and script.js at dest destination directory.
but it won't work, till you not register this concat task inside below line:
grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);
So, till concat will not concatenate those files in dest directory, how the uglify will collect and work!
Conclusion: task won't get execute till you not mention them inside grunt.registerTask function.

My problem was that the path to my source file was incorrect. So it wasn't so much that the file is "empty" but that it can't be found.

Grunt - Concat multiple JS files and watch for changes

Still a bit of a newbie with Grunt, so please bear that in mind with your answers. I am trying to setup a task in Grunt that will concat any JS files within a directory called "custom", into a single file called custom-concat.js, however after running grunt watch (which runs fine without error), nothing is happening when I try and make changes to any of the files within my "custom" directory (i.e. console just sits at "waiting...." even after I make changes to any JS files within "custom" directory). Clearly there is something wrong with my concat task, but I can't seem to see what the problem is. Can anyone see where the problem lies? Full gruntfile below:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
//pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
},
dist: {
src: ['scripts/custom/**/*.js'],
dest: 'scripts/custom-concat.js',
},
},
uglify: {
build: {
src: 'scripts/custom-concat.js',
dest: 'scripts/custom.min.js'
}
},
less: {
options: {
paths: ["css"]
},
files: {
"styles.css": "less/styles.less"
}
},
watch: {
scripts: {
files: 'scripts/**/*.js',
task: ['concat', 'uglify:build']
},
styles: {
files: 'css/less/**.less',
task: 'less'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['concat', 'uglify']);
};

As far as I see, there are three small issues with your watch task:
The correct attribute for watch is taskS not task
If you want to run the tasks of watch, directly at the beginning, use options { atBegin: true }
Your watch task monitors the script folder. However, this folder will also contain your concated and uglified files. So this task will run into an infinite loop. You should probably only watch the scripts/custom folder
So your watch task should probably look something like this:
watch: {
scripts: {
files: 'scripts/custom/**/*.js',
tasks: ['concat', 'uglify:build'],
options: {
atBegin: true
}
},
styles: ...
}
Github grunt-contrib-watch

grunt: how to generate jshint output as HTML

I'm trying to run jshint using grunt. This works, but now I would like the output to be HTML. Here is my grunt file
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'src/*.js']
, options: {
//reporter: 'jslint'
reporter:'checkstyle'
, reporterOutput: 'jshint.html'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
};
Running this grunt taks, the output is in XML. Any suggestion how to turn this into something that outputs HTML ?
Thanks a lot

You would need to write a custom reporter. Check the jshint docs on writing custom reporters: http://jshint.com/docs/reporters/ Then you can specify the path to the reporter with:
options: {
reporter: '/path/to/custom/html/reporter',
reporterOutput: 'jshint.html'
}

You can use jshint reporter from nodejs
This generates output in HTML
https://www.npmjs.com/package/jshint-html-reporter
Include this in your GruntFile.js
grunt.initConfig({
jshint: {
options: {
reporter: require('jshint-html-reporter'),
reporterOutput: 'jshint-report.html'
},
target: ['file.js']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint']);