We Keep Coding

Terser does not give minified file

I am trying to minify an angularjs application using grunt and terser. I first used uglifiy-es but then read that it has some issues. So I tried terser. But the output does not give me minified files.
The gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//grunt task configuration will go here
ngAnnotate: {
options: {
singleQuotes: true
},
app: {
files: {
'./public/min-safe/js/_config_min.js': ['./controllers/_config.js'],
'./public/min-safe/js/ctrl_accountingdashboard.js': ['./controllers/ctrl_accountingdashboard.js'],
}
}
},
concat: {
js: { //target
src: ['./public/min/app.js', './public/min-safe/js/*.js'],
dest: './public/min/app.js'
}
},
terser: {
options: {},
files: {
'./public/min/app.js': ['./public/min/app.js'],
},
}
});
//load grunt tasks
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-terser');
grunt.loadNpmTasks('grunt-ng-annotate');
//register grunt default task
grunt.registerTask('default', ['ngAnnotate', 'concat', 'terser']);
}

I had the same problem. According to the documentation, this should work but it didn't for me. Wrapping the "files" setting in a custom target works for me:
terser: {
options: {},
main: {
files: {
'./public/min/app.js': ['./public/min/app.js'],
}
}
}

To add to #Tim's great answer:
Here is an example that allows to run grunt-terser with path / file wildcard patterns (globbing) – which it does not support out of the box.
Please note the helper properties _src and _dest in the terser config which are not read by grunt-terser itself but by the task terser_all. This task expands the globbing pattern(s) in _src and builds the real config in the files property. When done it runs terser with that updated config.
module.exports = function (grunt) {
grunt.initConfig({
terser: {
dist: {
options: {
compress: {
drop_console: true // remove console.log, console.info, ...
}
},
files: {
// FILLED through terser_all task below!
// Examples config:
// "dist/example.js": [ "path/to/files/example.js" ]
// "dist/example_joined.js": [ "path/to/files/*.js" ]
},
// -----
// HELPER PROPERTIES to build the files prop (see above) in the terser_all task below.
_src: [
"path/to/files/*.js"
],
_dest: "dist/"
}
}
});
grunt.registerTask('terser_all', function () {
// work on this target in terser config
var terser_target_name = "dist";
// read the terser config
var terser_config = grunt.config.get('terser') || {};
var terser_target_config = terser_config[terser_target_name] || {};
// get the destination dir
var destDir = terser_target_config._dest;
// loop through all source files and create an entry in the terser config for each of it
var files = grunt.file.expand(terser_target_config._src);
for (const [i, file] of files.entries()) {
grunt.log.writeln(file);
// add this file to the terser config as: dest_file: src_file
terser_target_config.files[destDir + file] = file;
}
// show new config on CLI
grunt.log.writeflags(terser_target_config);
// write back config and run task
grunt.config.set('terser', terser_config);
grunt.task.run('terser');
});
grunt.loadNpmTasks('grunt-terser');
grunt.registerTask('build', ['terser_all']);
grunt.registerTask('default', ['build']);
};

Just a note:
If you try to "disable" some options by renaming this disables the whole process. At least this was my result with grunt-terser. I was left with the original js file.
{
mangleX: {
reserved: [/* ... */]
}
}

gulp-browserify output different than it should be

I am using gulp with browserify to concatenate, babelify, and browserify several js libraries. This is in my gulpfile.js:
gulp.task('scripts', function () {
var b = browserify({
entries: ['src/scripts/modernizr.js', 'src/scripts/main.js'],
debug: true
}).transform(babelify, { presets: ["latest"] });
return b.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add transformation tasks to the pipeline here.
// .pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('build/js/'));
});
And my package.json:
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
]
]
}
In my main.js this is how I am including the libraries:
var $ = window.jquery;
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
// import spica from 'spica';
// import localsocket from 'localsocket';
var spica = require('spica');
var localsocket = require('localsocket');
import Pjax from 'pjax-api';
However I’m getting the following error in the console:
pjax-api.js:8Uncaught Error: Cannot find module 'spica'
at s (http://localhost:8000/static/articles/build/js/main.js:1:148)
at http://localhost:8000/static/articles/build/js/main.js:1:305
at s (http://localhost:8000/static/articles/build/js/main.js:12699:28)
at http://localhost:8000/static/articles/build/js/main.js:12708:24
at Object.r.42.../../../lib/dom (http://localhost:8000/static/articles/build/js/main.js:14446:27)
at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
at http://localhost:8000/static/articles/build/js/main.js:12708:24
at Object.r.41../gui (http://localhost:8000/static/articles/build/js/main.js:14429:25)
at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
at http://localhost:8000/static/articles/build/js/main.js:12708:24
at Object.r.4../layer/interface/service/api (http://localhost:8000/static/articles/build/js/main.js:12738:25)
at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
at http://localhost:8000/static/articles/build/js/main.js:12708:24
at Object.r.pjax-api../src/export (http://localhost:8000/static/articles/build/js/main.js:15017:22)
at s (http://localhost:8000/static/articles/build/js/main.js:12706:21)
at e (http://localhost:8000/static/articles/build/js/main.js:12715:9)
at Object.3 (http://localhost:8000/static/articles/build/js/main.js:12717:2)
at s (http://localhost:8000/static/articles/build/js/main.js:1:254)
at http://localhost:8000/static/articles/build/js/main.js:1:305
at Object.8.jquery (http://localhost:8000/static/articles/build/js/main.js:67062:16)
at s (http://localhost:8000/static/articles/build/js/main.js:1:254)
at e (http://localhost:8000/static/articles/build/js/main.js:1:425)
at http://localhost:8000/static/articles/build/js/main.js:1:443
This is my directory structure:
articles
|--gulpfile.js
|--package_json
|--build
| |--img
| |--css
| |--js
| | |--main.js
|--src
| |--img
| |--styles
| |--scripts
| | |--main.js
|--node_modules
| |--spica
| |--localsocket
| |--pjax-api
| |--etc.
What is going wrong?
The full output of main.js is too big to paste, but here it is in a gist. And here is the rest of my code in another gist.

Do you have the spica-package installed? If not, try this:
npm install --save-dev spica

if your 'spica' is present in the same directory where main.js is present then its fine or else
You have to specify
like this ,
var spica = require(dir_path/spica.js)
share your directory structure so i can provide you exact syntax.

Grunt concats JS file multiple times

I'm working on a Node.js website and I'm using Grunt to concat and minify my CSS and JS files. However, after running the grunt command I'm getting the error message:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
Here's my grunt file:
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};
If anything I would have thought jQuery would be the one that's getting concatenated multiple times but it's not. Any suggestions what I might be doing wrong?
EDIT: Here's my upgraded grunt file with all 3rd party libraries listed in the concat.src.
/// <binding BeforeBuild='default' />
/*global module */
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
// read in the project settings from the package.json file into the pkg property
pkg: grunt.file.readJSON("package.json"),
// Install only the bower packages that we need
bower: {
install: {
options: {
"targetDir": "./public/lib",
"copy": true,
"cleanup": true,
"install": true
}
}
},
concat: {
css: {
src: ["public/lib/css/**/*.css", "public/css/cts.css"],
dest: "public/lib/dist/main.css"
},
js: {
src: [
"public/lib/js/jquery/jquery.js",
"public/lib/js/bootstrap/bootstrap.js",
"public/lib/js/fullpage.js/jquery.fullpage.js",
"public/lib/js/jquery-easing-original/jquery.easing.js",
"public/lib/js/slimscroll/jquery.slimscroll.js",
"public/lib/js/wow/wow.js",
"public/js/cts.js"
],
dest: "public/lib/dist/main.js"
}
},
cssmin: {
target: {
files: {
"public/lib/dist/main.min.css": "public/lib/dist/main.css"
}
}
},
uglify : {
js: {
files: {
"public/lib/dist/main.min.js": "public/lib/dist/main.js"
}
}
},
copy: {
files: {
expand: true,
flatten: true,
src: ["public/lib/fonts/**/*"],
dest: "public/lib/fonts/",
filter: "isFile"
}
}
});
// Add all plugins that your project needs here
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
// this would be run by typing "grunt test" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("test", []);
// define the default task that can be run just by typing "grunt" on the command line
// the array should contains the names of the tasks to run
grunt.registerTask("default", [ "bower", "concat", "cssmin", "uglify", "copy"]);
grunt.registerTask("combine", [ "concat", "cssmin", "uglify", "copy"]);
grunt.registerInitTask("install", ["bower"]);
};

Your issue seems to be in concate.js.src
src: ["public/lib/**/jquery.js", "public/lib/**/*.js", "public/js/cts.js"]
This will have your files added multiple times as there might some files common among the paths mentioned in src.
You should probably move all your vendor files like jquery out of the public directory and put in a different one, say vendor.
Your src should then look something like
src: ["vendor/**/*.js", "public/**/*.js"]
As you see now there are no common files among these two paths.
Also its a good practice to always have 3rd party code outside your app directory as a sibling folder and not inside it.
EDIT:
Ah! I see whats your problem. You want to have jquery first among the other vendor files.
public/lib/**/jquery.js and public/lib/**/*.js together might be causing files added twice.
Try this
src: ["public/lib/jquery/jquery.js", "public/lib/**/*.js", "!public/lib/jquery/jquery.js", public/js/cts.js"]
Put the full path of jquery first public/lib/jquery/jquery.js and then the !public/lib/jquery/jquery.js should prevent jquery being added again as part of public/lib/**/*.js
Got the above pattern from here http://gruntjs.com/configuring-tasks#globbing-patterns
If this still doesn't work, then another option is to add all paths in the src array individually. If you have a requirejs config just copy the paths from there, as jquery might not be the only dependency issue you face in future.

copy JSON files from one dir to another

In my web project I have the following directory structure
|- target
|- foo
|- bar
|- baz
I'm trying to write a Grunt task that will copy all JSON files into the target directory from the directory whose name matches a parameter provided to the build
grunt.registerTask('flavor', function(srcDir) {
var from = './' + srcDir + '/*.json';
var dest = './target/';
grunt.file.expand(from).forEach(function(src) {
grunt.file.copy(src, dest);
});
});
But when I call this with
grunt flavor:foo
I get an error
Warning: Unable to write "./target/" file (Error code: EISDIR). Use --force to continue.

As #DanielApt mentioned, you should just use grunt-contrib-copy. To build on his answer regarding on your comment about build-parameters, you can get them to the task via grunt-option.
Way one: running different target
grunt.initConfig({
copy: {
foo: {
files: [
{
'expand': 'true',
'cwd': 'foo/',
'src': [**],
'dest': 'dist/en'
}
]
},
bar: {
files: [/**/]
},
baz: {
files: [/**/]
}
}
});
var target = grunt.option("target") || "foo";
grunt.registerTask("default", ["copy:" + target]);
// run with grunt --target=foo
Way 2: Arbituary folder with templating:
var target = grunt.option("target") || "foo";
grunt.initConfig({
target: target,
copy: {
default_target: {
files: [
{
'expand': 'true',
'cwd': '<%= target %>/',
'src': [**],
'dest': 'dist/en'
}
]
},
}
});
grunt.registerTask("default", ["copy"]);
// run with grunt --target=anyfolderhere

Do you need to write your own task? If you don't I achieved this with grunt-contrib-copy.
copy: {
default: {
files: [
{
expand: true,
src: ['foo/**', 'bar/**'],
dest: 'target/'
}
]
}
}

message: 'Unexpected token: punc (.)', while using uglify in grunt

Goal
My goal is to concatenate all my css,js files and minify all of them.
I can minify my concat.js, but I'm struggling trying to minify my concat.css.
Gruntfile.js
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
concat: {
js: {
src: [
'js/bootstrap.min.js',
'js/jquery-1.10.2.min.js',
'js/jquery.easypiechart.min.js',
'js/jquery.isotope.min.js',
'js/jquery.magnific-popup.min.js',
'js/waypoints.min.js',
'js/respond.min.js',
'js/jquery.vegas.min.js',
'js/modernizr-2.6.2.min.js',
'js/jquery.nav.js',
'js/html5shiv.js',
'js/jquery.scrollTo.js',
'js/jquery.sticky.js',
'js/jquery.validate.js',
'js/main.js',
],
dest: 'dist/concat.js'
},
css: {
src: [
'css/magnific-popup.css',
'css/main.css',
'css/xl.css',
'css/lg.css',
'css/md.css',
'css/sm.css',
'css/xs.css',
'css/print.css',
'css/bootstrap.min.css',
'css/font-awesome.min.css',
],
dest: 'dist/concat.css'
}
},
watch: {
js: {
files: ['js/*.js'],
task: ['concat:js']
},
css: {
files: ['css/*.css'],
task: ['concat:css']
}
},
uglify: {
js: {
files: {
'dist/minified.js': ['dist/concat.js']
}
},
css: {
files: {
'dist/minified.css': ['dist/concat.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'uglify']);
};
Result
I concatenate all my css and js files succesfully, and they're generated at :
dist/concat.js
dist/concat.css
Then, I can also minify my concat.js with no problem, but I'm struggling trying to minify my concat.css.
I kept getting this error in the bottom of my Terminal :
Running "uglify:css" (uglify) task
{ message: 'Unexpected token: punc (.)',
filename: 'concat.css',
line: 4,
and line4 is just the beginning of my class : .mfp-bg {
Can someone please give me a little push here ?
Also, should I perform minify after concatenation or the other way around ?
Is there a better way to do this ?

uglify is for minimising JavaScript only, not CSS.
If you want to minimise CSS you can use the cssmin task for Grunt instead.