I have a Grunt file with the following content:
module.exports = function(grunt) {
// require('load-grunt-tasks')(grunt);
/* global process */
// configures browsers to run test against
// any of [ 'PhantomJS', 'Chrome', 'Firefox', 'IE']
var TEST_BROWSERS = ((process.env.TEST_BROWSERS || '').replace(/^\s+|\s+$/, '') || 'PhantomJS').split(/\s*,\s*/g);
// project configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
config: {
app: 'app',
sources: 'lib',
tests: 'test'
},
release: {
options: {
tagName: 'v<%= version %>',
commitMessage: 'chore(project): release v<%= version %>',
tagMessage: 'chore(project): tag v<%= version %>'
}
},
browserify: {
options: {
browserifyOptions: {
builtins: false
},
bundleOptions: {
detectGlobals: false,
insertGlobalVars: [],
debug: true
}
},
watch: {
files: {
'<%= config.app %>/bpmn-viewer.js': [ '<%= config.app %>/bpmn.js', 'index.js' ]
},
options: {
watch: true
}
},
standaloneViewer: {
files: {
'<%= config.app %>/bpmn-viewer.js': [ '<%= config.app %>/bpmn.js', 'index.js' ]
},
options: {
alias: [
'jquery:jquery',
'lodash:lodash',
'index.js:bpmn-js-diffing',
'<%= config.app %>/bpmn.js:bpmn-js'
]
}
},
},
jsdoc: {
dist: {
src: [ '<%= config.sources %>/**/*.js' ],
options: {
destination: 'docs/api',
plugins: [ 'plugins/markdown' ]
}
}
}
});
// tasks
grunt.registerTask('test', [ 'karma:single' ]);
grunt.registerTask('auto-test', [ 'karma:unit' ]);
// grunt.registerTask('default', [ 'jshint', 'test', 'browserify:standaloneViewer', 'jsdoc' ]);
grunt.registerTask('default', [ ]);
};
I know that somewhere in this file there must be an expression that minifies the code (I inherited the code from someone else, therefore I don't know how it works). The resulting file is called bpmn-viewer.js.
Could the lines
standaloneViewer: {
files: {
'<%= config.app %>/bpmn-viewer.js': [ '<%= config.app %>/bpmn.js', 'index.js' ]
},
mean that the files '<%= config.app %>/bpmn.js', 'index.js' should be combinded to <%= config.app %>/bpmn-viewer.js?
If possible, please provide links to the documentation that describes it.
There is some information missing, like the project you forked off and the package.json dependencies.
Luckily, I found https://github.com/bpmn-io/bpmn-js-diffing and that's probably the project you forked. Lets note that this project is very old and so are its dependencies, which I had to fix for it to work, so the versioning alone might change my results from yours.
What I didn't find were minified contents. The file app/bpmn-viewer.js is the concatenation result. The multiple files are concat into this one, yes, but there's only the browserify header that is always minified within bpmn-viewer.js.
First off, you commented load-grunt-tasks and the "default" grunt task, so I'm not sure you really ran grunt of this Gruntfile.js. Commenting it out cannot work, because there are no calls to grunt.loadNpmTasks as far as I'm aware, grunt plugins are not loaded without any loading instruction.
Now to the documentation. You are right that the concatenation happens because of the files field. This is part of Grunts Task definition layout.
Browserify analyzes the given files and concats them into one. That's the abstract description, more of that in the browserify handbook.
Still keep in mind: The versions of your forked project are very old.
So here's what I could find out in short:
No, the contents are not minified
A browserify header (which are minified) and the source map contents are added to the final file
If you really have minified content, please provide the package.json dependencies and the real running Gruntfile.js.
Related
I am new to Grunt and all its plugins, but I want to learn and setup some awesome front-end tools. With that said, I have been following the Grunt docs and some's similar issue with Grunt and Babel via Github, but I seem to keep getting the following traceback:
Running "babel:dist" (babel) task
Warning: Unable to write "dist" file (Error code: EISDIR). Use --force to continue.
Aborted due to warnings.
Any clearer explanation to this newbie would be HIGHLY appreciated. I'm new to programming in JS and setting up DevOps, so some helpful tips and best practices are encouraged.
Setup:
js_practice/ (Root Project)
|----package.json
All the distributions and packages
|---node_modules/
Server-Side (Node) support
|---es6/
| ------ test.js
|---dist/
Client (browser) support
|----public/
|---es6/ (this is within the public folder)
| ----- test2.js
|---dist/ (this is within the public folder)
Here is my current code:
Grunt file.js
module.exports = function(grunt) {
// All of your Grunt code must be specified inside this function!
// Setup configuration...
// Load tasks...
// Define tasks...
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
babel: {
options: {
sourceMap: true,
presets: ['babel-preset-es2015']
},
dist: {
files: [
// Node source
{
src: ['es6/**/*.js'],
dest: 'dist'},
// Browser source
{
src: ['public/es6/**/*.js'],
dest: 'public/dist'},
],
},
},
browserify: {
dist: {
options: {
transform: [["babelify", { "stage": 0 }]]
},
files: {
"build/bundle.js": "src/main.js"
}
}
},
jshint: {
scripts: {
src: ['scripts/**.js', 'lib/**.js']
},
tests: { // We can have more than one jshint task, this ones called `jshint:tests`
src: 'tests/**.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
},
scripts: {
expand: true,
cwd: 'scripts/',
src: '**.js',
dest: 'build/',
ext: '.min.js'
}
},
watch: {
scripts: {
files: ['**/*.js'],
tasks: ['jshint'],
},
styles: {
files: 'styles/**.less',
task: 'less:styles'
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-babel');
grunt.registerTask('default', ['babel','browserify','jshint']);
grunt.registerTask('build', ['jshint', 'uglify']);
};
Just expanding on what I said in the comments
Any clearer explanation to this newbie would be HIGHLY appreciated.
Nodejs is trying to write a file called dist, but produces an error because a directory with this name exists.
The cause of this is found in the babel task.
files: [{
src: ['es6/**/*.js'],
dest: 'dist'
},
// Browser source
{
src: ['public/es6/**/*.js'],
dest: 'public/dist'
}]
You have to tell Babel to take each file in es6/, transform them and place the new files in the dist/ folder. As it stand now, the transformer tries to create a file called dist. Rewriting it to
files: [{
expand: true,
cwd: 'es6/'
src: ['**/*.js'],
dest: 'dist/'
},
// Browser source
{
expand: true,
cwd: 'public/es6/'
src: ['**/*.js'],
dest: 'public/dist/'
}]
should yield a better result, but play around with it. Like I mentioned, I haven't used Grunt in a while. Take a look at the documentation on building the files object
And like I said in the comments, use jshint or other such tools (eslint is all the hype...) to keep your own code neat. Don't waste time by running a jshint task on lib files that you probably don't want to fix yourself anyway. And always run jshint on the source files, not files that are transformed by babel or browserify. It's just a tool to help you write better code, not some generator.
I'm using the minifyify plugin as recommended by this answer but I can't seem to find any way to pass flags/options to it when used with Grunt.
Here is the relevant part of my Gruntfile:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
options: {
browserifyOptions: {
debug: true
},
exclude: [/*...all vendor packages...*/],
transform: [
'brfs',
'debowerify',
'deamdify'
]
},
app: {
files: [{
expand: true,
cwd: 'web/resources/js',
src: '**/*.js',
dest: 'web/assets/js',
ext: '.min.js',
extDot: 'last'
}],
options: {
plugin: ['minifyify']
}
}
}
});
The compiled files are appended to with //# sourceMappingURL=bundle.map, which is incorrect. Also, the map files aren't being written to disk or generated at all.
How can I pass options in so that the sourceMappingURL is the same as the file name? So for example:
/web/assets/js/foo.min.js -> /web/assets/js/foo.js.map
/web/assets/js/bar.min.js -> /web/assets/js/bar.js.map
and so on...
you can pass options into grunt-browserify plugins/transforms if you pass in the transform as an array with the name as first item, and the options-object as the second:
plugin: [['minifyify', {your: 'options'}]]
for the transform option it is documented here: https://github.com/jmreidy/grunt-browserify#transform
for the plugin-option there is no documentation, but they generally work the same (see lib/runner.js, ans search for options.plugin)
I am trying, using grunt and babel, to transpile all js6 files in a folder and end up with a concatenated single file (js5) with a working sourcemap to the original es6 files. However the sourcemapping does not work. My babel, concat settings below:
"babel": {
options: {
sourceMap : true
},
dist: {
files:[
{
expand: true,
cwd: 'wwwroot/js/src',
src: ['*.js'],
dest: 'tmp/js'
}]
}
},
concat: {
options: {
sourceMap: true
},
js: {
src: [
'tmp/js/*.js',
],
dest: 'wwwroot/js/app.js'
}
}
Versions:
"grunt": "0.4.5",
"grunt-bower-task": "0.4.0",
"grunt-babel": "5.0.1",
"grunt-contrib-concat" : "0.5.1"
I am ending up with firstly a folder with a lot of js files and src maps(tmp directory). But concatinating them into one file messes up with source mapping completely.
Ideas? Also, can I somehow skip the making of temporary files and sort of just pipe the result into concat?
Reversing the order of task will make this much easier.First run the concat task on the JS files. After that run babel task on the single file created by concat task previously with the following options
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
Here the script.js.map file is the name of the source map file generated by concat task. As inputSourceMap option excepts a source map object , we pass it in using the grunt.file API's readJSON method
The full Grunt file configuration would be:
concat: {
options: {
sourceMap: true
},
js: {
src: ['Modules/**/js/*.js'],
dest: 'script.js'
}
},
babel: {
dist: {
options: {
sourceMap: true,
inputSourceMap: grunt.file.readJSON('script.js.map')
},
src: [
'script.js',
],
dest: 'app.js'
}
}
Example project: https://github.com/pra85/Grunt-Concat-Babel-Example
So i am trying to set up my first grunt application, but i am struggling with the watch task.
When I run the task watch looks like it is working when i change my sass files, but the css files are not updated, so it looks like it is not compiling.
I am wondering if i need to install something else, for me this is all new... and i am not sure if I understand, because it looks very simple but I just cant make it work.
So here is my code
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
options: {
livereload: true
},
files:['sass/**/*.scss'],
task:['sass']
},
css: {
files: ['css/*.css'],
tasks: []
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: 'sass',
src: ['*.scss', '*.sass'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
I think you want your livereload to be on the css files instead of scss. As it is the compiled file that you want to be reloaded and not the preprocessed (scss) file.
Example
watch:{
sass:{
files:['sass/**/*.scss'],
task:['sass']
},
css: {
options: {
livereload: true
},
files: ['css/*.css']
}
}
OWWWWW....
I just found the problem... it should have been "tasks" not "task", i wasted sooo much time, on finding this little thingy!
I have recently discovered grunt as it is used within an opensource project I have started to work on. Having not worked with grunt before I am struggling to see how it works, or in my case doesn't.
The grunt file is supplied by the project and I assume it works for everyone else. I have installed grunt and the necessary grunt modules have all installed in the "Node_modules" directory.
When running the grunt file the first process performs a number of concatenations and this seems to work fine. The concatenated files are created.
All of the other steps do not seem to execute. The files they are intended to create are not created. There is no error message displayed on the console when grunt is executed.
I'm stumped - anyone have any clues what might be the problem.
The grunt file is :
/*global module:false*/
module.exports = function(grunt) {
// Project configuration...
grunt.initConfig({
manifest: grunt.file.readJSON('chrome/manifest.json'),
concat: {
dist: {
src: ['chrome/js/requester/**/*.js'],
dest: 'chrome/js/requester.js'
},
requester_html: {
src: [
'chrome/html/requester/header.html',
'chrome/html/requester/sidebar.html',
'chrome/html/requester/main.html',
'chrome/html/requester/loggers/*.html',
'chrome/html/requester/modals/*.html',
'chrome/html/requester/footer.html'
],
dest: 'chrome/requester.html'
},
requester_tester: {
src: [
'chrome/html/requester/header.html',
'chrome/html/requester/sidebar.html',
'chrome/html/requester/main.html',
'chrome/html/requester/modals/*.html',
'chrome/html/requester/loggers/*.html',
'chrome/html/requester/footer.html',
'chrome/html/requester/tester.html'
],
dest: 'chrome/tester.html'
}
},
mindirect: {
dist: {
src: ['chrome/js/requester.js'],
dest: 'chrome/js/requester.min.js'
}
},
watch: {
requester_templates: {
files: ['chrome/html/requester/templates/*'],
tasks: ['handlebars'],
options: {
livereload: true
}
},
requester_js: {
files: ['chrome/js/requester/**/*.js'],
tasks: ['concat:dist'],
options: {
livereload: true
}
},
requester_html: {
files: ['chrome/html/requester/*', 'chrome/html/requester/modals/*', 'chrome/html/requester/loggers/*'],
tasks: ['concat:requester_html', 'concat:requester_tester'],
options: {
livereload: true
}
},
requester_css: {
files: ['chrome/css/**/*.scss'],
tasks: ['sass'],
options: {
livereload: true
}
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
jQuery: true
}
},
handlebars: {
compile: {
options: {
partialsUseNamespace: true,
namespace: 'Handlebars.templates',
processPartialName: function(filePath) {
var pieces = filePath.split("/");
var name = pieces[pieces.length - 1].split(".")[0];
return name;
},
processName: function(filePath) {
var pieces = filePath.split("/");
var name = pieces[pieces.length - 1].split(".")[0];
return name;
}
},
files: {
"chrome/html/requester/templates.js": "chrome/html/requester/templates/*"
}
}
},
sass: {
dist: {
files: {
'chrome/css/requester/styles.css': 'chrome/css/requester/styles.scss'
}
}
},
compress: {
main: {
options: {
archive: 'releases/v<%= manifest.version %>.zip'
},
files: [
{src: ['chrome/**', '!chrome/tests/**', '!chrome/manifest_key.json', '!chrome/tester.html'], dest: '/'}, // includes files in path and its subdirs
]
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-handlebars');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-mindirect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-compress');
// Default task.
grunt.registerTask('default', ['jshint', 'concat']);
grunt.registerTask('package', ['concat', 'handlebars', 'sass', 'compress']);
};
The output from the console is as follows :
Running "jshint:globals" (jshint) task
>> 0 files lint free.
Running "concat:dist" (concat) task
File "chrome/js/requester.js" created.
Running "concat:requester_html" (concat) task
File "chrome/requester.html" created.
Running "concat:requester_tester" (concat) task
File "chrome/tester.html" created.
Done, without errors.
Given that the tasks are defined like this:
grunt.registerTask('default', ['jshint', 'concat']);
grunt.registerTask('package', ['concat', 'handlebars', 'sass', 'compress']);
the output you show is what you'd expect if you are running grunt without a task name. It runs the jshint and concat tasks.
If you want to run the tasks associated with package, then you have to run grunt package to run those tasks.
It looks like I did not understand "tasks" within grunt.
Instead of executing "grunt" which runs the "default" tasks, I had to execute "grunt package" which runs the tasks that I was interested in.
As Louis said, you have to specify the right task to run.
But you can also create or modify the tasks you have in order to make it simpler. In your example you may include package in the default task. Because concat task is already executed inside package, you may just replace it in the default task:
grunt.registerTask('default', ['jshint', 'package']);
grunt.registerTask('package', ['concat', 'handlebars', 'sass', 'compress']);
and, in order to build your site, just type
grunt
both jshint and package tasks will be executed