I have a problem with grunt-frontend package.
When I run grunt task I get:
Running "frontend-js:main" (frontend-js) task
Processing /assets/js/main.min.js
Warning: Cannot assign to read only property 'spidermonkey' of /assets/js/main.min.js Used --force, continuing.
What is going wrong?
I have Gruntfile.js configured like in the documentation:
'frontend-js': {
main: {
options: {
minify: true,
uglify: {}
},
files: {
'out/js/f.js': [
'test/js/file1.js',
'test/js/file2.js'
]
}
}
}
When I set minify: false everything works normally, except minification of course.
Related
This is my first day with grunt and I'm trying to make it work using these tutorials
https://24ways.org/2013/grunt-is-not-weird-and-hard/
https://css-tricks.com/autoprefixer/
And my Gruntfile.js is this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['scripts/app.js'],
tasks: ['uglify'],
options: {
spawn: false,
}//For some reason I had a come here. Don't know if it matters
},
css: {
files: ['content/app.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
styles: {
files: ['content/app.css'],
tasks: ['autoprefixer']
}
},
uglify: {
build: {
src: "scripts/app.js",
dest: "scripts/app-final.js"
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'content/app.css': 'content/app.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'content/app-prefixed.css': 'content/app.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'assets/img/'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask(
'default', [
'watch',
'uglify',
'sass',
'autoprefixer',
'imagemin'
]);
};
But when I try grunt watch watch I get this:
# grunt watch
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
To make things weirder grunt uglify is seen
# grunt uglify
Running "uglify:build" (uglify) task
>> Destination scripts/app-final.js not written because src files were empty.
>> No files created.
Done, without errors.
Running grunt --help gives me an interesting thing
Available tasks
uglify Minify files with UglifyJS. *
default Alias for "watch", "uglify", "sass", "autoprefixer", "imagemin" tasks.
I really cannot find a difference between uglify and the other functions. VS Code doesn't give me any errors. I installed all of the used tasks. I have node installed.
Restarting VS Code doesn't help. I don't think this matters but just in case, I'm using Linux.
Reinstalling the dependencies didn't help either
You did the following:
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
Replace it with this:
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
Grunt does not take multiple Arguments in grunt.loadNpmTasks for some reason. You can see the proper usage of the loadNpmTasks - function in the documentation: https://gruntjs.com/sample-gruntfile
New to grunt I have successfully used it to run purifycss. Now I want to run purifycss twice with different arguments, and ideally concat the two resulting files afterwards.
What I have so far is this Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
purifycss: {
bootstrap: {
options: {},
target: {
src: [ 'live/*.twig' ],
css: ['live/css/bootstrap*.css'],
dest: 'purified_bootstrap.css'
}
},
mycss: {
options: {},
target: {
src: [ 'live/*.twig' ],
css: ['live/css/mycss.css'],
dest: 'purified_mycss.css'
}
}
}
});
grunt.loadNpmTasks('grunt-purifycss');
grunt.registerTask('purify', ['purifycss:bootstrap', 'purifycss:mycss']);
};
The output I get when running grunt purify from terminal:
> grunt purify
Running "purifycss:bootstrap" (purifycss) task
Warning: Cannot call method 'forEach' of undefined Use --force to continue.
Aborted due to warnings.
Any help on what's going wrong here appreciated!
I'm trying to build my JS-bundle via grunt/browserify. I also use grunt for scss compile. For that I use grunt-watch to trigger scss compile on changes.
I wanted the same behavior for JS-browserify. grunt-browserify comes with the "watch" option, which does the trick very well.
My only issue is: I want to get notified after a "re-browserify". For SCSS I use grunt-notify. But I do not find any way to trigger a grunt task after browserify-watch.
My gruntfile excerpt:
var gruntOptions = {
notify: {
browserify_node_modules: {
options: {
title: "Browserify",
message: "node_modules build"
}
}
},
browserify: {
node_modules: {
src: ["node_modules.js"],
dest: "trunk/js/lib/node_modules.js",
options: {
watch: true,
}
}
}
};
Best case scenario:
options: {
watch: true,
finishTask: "notify:browserify_node_modules"
}
Thanks!
You can check if the file generated by Browserify has been changed and then, trigger a task.
Install watch task in Grunt:
npm install grunt-contrib-watch --save-dev
Configure watch task within Gruntfile.js:
grunt.initConfig({
// other tasks
your_task: {
// ...
},
watch: {
dev: {
files: 'trunk/js/lib/node_modules.js', // file generated by Browserify
options: { spawn: false },
tasks: ['your_task']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
I'm currently trying to migrate a grunt project to a gulp project. Actually, in the gruntfile I have (for the jshint task) something like this:
jshint: {
options: {
trailing:true,
evil:false,
indent:4,
undef:true,
unused:true,
node:false,
browser:false,
loopfunc:true,
devel:false
},
default: {
options: {
browser:true,
globals: {
define:true
}
},
src: [basePath + "js/**/*.js"]
}
}
So, when I write "grunt jshint" in the terminal it seems to work fine. However, in the gulpfile I wrote this:
gulp.task("jshint", function() {
return gulp.src( basePath + "js/**/*.js" )
.pipe( jshint( { "trailing": true,..., "globals": true } ) )
.pipe( jshint.reporter("default") );
});
But when I write "gulp jshint" in terminal, it crashes.
My question is: Is there a way to send jshint parameters without .jshintrc file with the gulp-jshint node package? (I've already read the documentation in the npm site, but I dont undestand the "lookup" option)
globals is an array, not true false, here is my example. lookup works just like you were thinking.
gulp.src(files.backend)
.pipe(jshint({ "lookup": false, /* other options */ "globals": ['$']}))
.pipe(jshint.reporter(stylish))
.on('error', gutil.log);
I've recently converted a canvas library I wrote into typescript. I've broken the code down into classes and they all attach themselves to a cnvs module, but i'm have a hard time compiling these down to one file.
Ideally I would like to have my files run through browserify, but at the moment i just want to get it working.
One file may look like
module cnvs {
export class Shape {
// stuff here
}
}
and then another would be
/// <reference path="Shape.ts" />
module cnvs {
export class Rect extends Shape {
// rectangle stuff here
}
}
Originally I was using import Shape = require('./Shape') (with some variants, like including extension and not including leading './')
In my cnvs.ts file I would to export the cnvs module, so that when it compiles I have a single file with the entire code base in, attaching to the window OR multiple files that could then be compiled with browserify into a single file.
The full code is at http://github.com/allouis/cnvs
Thanks
Checkout out typeify:
https://github.com/bodil/typeify
Please note it run on node.js.
You can simply compile the whole project using using --out out.js typescript compiler argument. This will merge all your files for you and generate an out.js.
One thing to be aware of is that the order of code in the arguments. Check out https://github.com/basarat/grunt-ts#javascript-generation-and-ordering
I use browserify & ```typescriptifier``'...
So you would do:
/// <reference path="Shape.ts" />
...
require("Shape.ts");
This is some of my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
clean: {
dev: ['dest/**/*.*']
},
browserify: {
dev: {
src: ['src/root.ts'],
dest: 'dest/App.js',
options: {
external: ['angular'],
transform: ['typescriptifier'],
debug: true,
bundleOptions: { debug: true },
browserifyOptions: { debug: true }
}
}
},
express: {
dev: {
options: {
bases: ['src'],
port: 5000,
hostname: '0.0.0.0',
livereload: false
}
}
},
watch: {
ts: {
files: ['src/**/*.ts', '!src/**/*.d.ts'],
tasks: ['dest'],
options: {
livereload: true,
debug: false,
debounceDelay: 100
}
},
html: {
files: ['src/**/*.css', 'src/**/*.html'],
options: {
livereload: true,
debug: false,
debounceDelay: 100,
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('dev', ['rebuild', 'express:dev', 'watch' ]);
grunt.registerTask('build', ['browserify:dev']);
grunt.registerTask('rebuild', ['clean:dev', 'build']);
};
See
https://www.npmjs.org/package/typescriptifier