Develop Reference

How to get Javascript Const to work with Grunt Uglify?

I am trying to use javascript Const with Grunt Uglify but receive the error:
Unexpected token: keyword «const».
I have done a little googling and tried
npm install terser-webpack-plugin --save-dev
However that did not work.
It was stated I needed to add the following to my Plugins array...
const TerserPlugin = require('terser-webpack-plugin')
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),
I wasn't sure exactly where to add this though? Does it go in my grunt file.js?
Additionally I also saw that a fix might be to use the harmony branch of grunt-contrib-uglify. But I fear this method is out of date?
Ultimately I am attempting to code a cookie consent pop up. Does anyone know how to get Const to work with grunt uglify?
Or does anyone have a better recommendation for coding cookie consent pop ups?
Many thanks.
Edit: Adding grunt file as requested
// Load Grunt
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Tasks
sass: { // Begin Sass Plugin (this takes all your scss files and compiles them into style.css)
dist: {
files: [{
expand: true,
cwd: 'assets/scss/my-theme',
src: ['**/*.scss'],
dest: 'dist/css',
ext: '.css'
}]
}
},
postcss: { // Begin Post CSS Plugin (this applies browser prefixes to your compiled style.css in 'dist' folder)
options: {
map: false,
processors: [
require('autoprefixer')({
overrideBrowserslist: ['last 2 versions']
})
]
},
dist: {
src: 'dist/css/style.css'
}
},
cssmin: { // Begin CSS Minify Plugin (this takes your style.css file from 'dist', minifies it and creates style.min.css)
target: {
files: [{
expand: true,
cwd: 'dist/css',
src: ['style.css', '!*.min.css'],
dest: 'dist/css',
ext: '.min.css'
}]
}
},
uglify: { // Begin JS Uglify Plugin (this takes your my-theme js files in 'assets', minifies them and creates script.min.js in 'dist' folder)
build: {
src: ['assets/js/my-theme/*.js'],
dest: 'dist/js/script.min.js'
}
},
watch: { // Compile everything into one task with Watch Plugin (this watches for any changes to scss and js files, so make sure it is pointing to your 'my-theme' CSS and JS folders in 'assets')
css: {
files: 'assets/scss/my-theme/**/*.scss',
tasks: ['sass', 'postcss', 'cssmin']
},
js: {
files: 'assets/js/my-theme/**/*.js',
tasks: ['uglify']
}
}
});
// Load Grunt plugins
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-terser');
// Register Grunt tasks
grunt.registerTask('default', ['watch']);
};

How to provide external port in grunt-cli, angular for hosting it on a server?

I am using docker to make image to run my frontend.
It's running perfectly in my laptop but on my server, I cant access it through my browser.
You can see my screenshot to see what my browser is saying about that.
So, my project is in angular (grunt-cli) frontend, backend is in flask and database is mongodb.
Backend is working fine but grunt-cli, I am not able to access it through browser but I can do
curl http://:9000 to see the content.
Here is my Gruntfile.js --
module.exports = function(grunt) {
// ===========================================================================
// CONFIGURE GRUNT ===========================================================
// ===========================================================================
grunt.initConfig({
// get the configuration info from package.json ----------------------------
// this way we can use things like name and version (pkg.name)
pkg: grunt.file.readJSON('package.json'),
// configure jshint to validate js files -----------------------------------
jshint: {
options: {
reporter: require('jshint-stylish')
},
all: ['Grunfile.js', 'src/components/**/*.js']
},
// configure uglify to minify js files -------------------------------------
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/components.min.js': 'src/components/**/*.js'
}
}
},
// compile less stylesheets to css -----------------------------------------
less: {
build: {
files: {
'dist/css/pretty.css': 'src/css/pretty.less'
}
}
},
// configure cssmin to minify css files ------------------------------------
cssmin: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/css/style.min.css': 'src/css/style.css'
}
}
},
// configure watch to auto update ------------------------------------------
watch: {
stylesheets: {
files: ['src/**/*.css', 'src/**/*.less'],
tasks: ['less', 'cssmin']
},
scripts: {
files: 'src/**/*.js',
tasks: ['jshint', 'uglify']
}
},
express:{
all:{
options:{
port:9000,
hostname:'0.0.0.0',
bases:['./src'],
livereload: true
}
}
}
});
// ===========================================================================
// LOAD GRUNT PLUGINS ========================================================
// ===========================================================================
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
// ===========================================================================
// CREATE TASKS ==============================================================
// ===========================================================================
grunt.registerTask('serve-waalos', ['jshint','cssmin','uglify','express','watch']);
grunt.registerTask('default', ['test', 'build']);
};

Most of Grunt tasks are not found

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

Trigger grunt task after browserify/watchify run

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');

Gruntfile.js error on windows

I am following this tutorial Link. I am using a windows PC
My SASS version is 3.4.16
This is my Gruntfile.js
module.exports = function(grunt) {
// Read package.json
grunt.file.readJSON('package.json');
//Initialize grunt
grunt.initConfig({
// Sass task
sass: {
// Sass development options
dev: {
options: {
style: 'expanded',
},
files: {
'css/main.css': 'css/sass/dev.scss'
}
},
// Sass distribution options
dist: {
options: {
style: 'compressed'
},
files: {
'css/main.css': 'css/sass/main.scss'
}
}
},
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-sass');
// Create Default Task
grunt.registerTask('dev', [
'sass:dev' // Compile Sass with dev settings
]);
// Create Distribution Task
grunt.registerTask('dist', [
'sass:dist' // Compile Sass with distribution settings
]);
}
When I reun this code i get an error as
Running "sass:dist" (sass) task Errno::ENOENT: No such file or
directory # rb_sysopen - undefined Use --trace for backtrace.
Warning: Exited with error code 1 Use --force to continue.
Could someone please help me with this.