Develop Reference

Turn off minification in Laravel Mix production options

I'm trying to turn off minification during the production build process. This is where I'm currently at in my webpack.mix.js file. However, nothing I've tried is working so far. What is the best way to do this?
webpack.mix.js
let mix = require('laravel-mix');
mix
.options({
minimize:false,
uglify: {
uglifyOptions: {
warnings: false,
comments: false,
beautify: true,
minify: false,
minimize: false,
compress: {
drop_console: true,
minimize: false,
}
}
},
cssnano:false,
})
.js('src/js/app.js', 'assets/js/common.js')
.sass('src/scss/style.scss', '').options({processCssUrls: false});
if (mix.inProduction()) {
mix.options({
minimize: false,
uglify: {
uglifyOptions: {
warnings: false,
comments: false,
beautify: false,
minify: false,
minimize: false,
compress: {
drop_console: true,
minimize: false,
}
}
},
cssnano:false,
});
}

Looking for more Webpack production bundle optimisation

I'm trying to reduce the output size of my application's JS bundle and looking around these are the plugins that I got so far to help me on this task:
config.plugins = [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
new ExtractTextPlugin({ filename: "bundle.css" }),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_getters: true,
unsafe: true,
unsafe_comps: true,
screw_ie8: true,
},
output: {
comments: false,
screw_ie8: true,
},
mangle: {
screw_ie8: true,
},
sourceMap: false,
minimize: true
}),
new LodashModuleReplacementPlugin({ 'collections': true }),
new DuplicatePackageCheckerPlugin()
];
I also set devtool to undefined for production.
And this is my .babelrc where I'm also doing some optimisations:
{
"presets": [
["es2015", { "es2015": { "loose": true, "modules": false}}],
"react",
"stage-0",
],
"env": {
"development": {
"presets": ["react"]
},
"production": {
"plugins": [
["transform-react-remove-prop-types", {
"mode": "wrap",
}]
]
}
},
"plugins": ["lodash"]
}
Is there any other thing I can do? The bundle has been reduced a lot but still quite big.

Grunt watch task not working

I am new to Grunt and am having trouble with the watch feature. I only have a couple tasks, both of which work fine when I put them into the CLI directly. Watch, however, doesn't. Any issues with this Gruntfile?
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
files: '<%= uglify.build.src %>',
tasks: 'uglify',
},
uglify: {
build: {
src: ['wp-content/themes/custom/js/live/*.js', 'wp-content/themes/custom/js/waypoints/*.js', 'wp-content/themes/custom/js/*.js'],
dest: 'wp-content/themes/custom/js/test.js'
}
},
jshint: {
src: ['Gruntfile.js', 'wp-content/themes/custom/js/*.js'],
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true,
globals: {
require: true,
define: true,
requirejs: true,
describe: true,
expect: true,
it: true
}
}
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task
grunt.registerTask('default', 'uglify');
};

I am seeing you didnt register any watch task.
Just put your default task to watch, or create a specific task when you want to watch.
grunt.registerTask("default", ["express","watch"]);
for example, or
grunt.registerTask("watchmeTaskName", "watch");

Using underscore with jshint

I'm using the underscore library.
I get this when running jshint:
[L38:C38] W117: '_' is not defined.
var approvedAndRequstedCount = _.countBy(products, function(obj) {
Warning: Task "jshint:all" failed. Use --force to continue.
This is my config file:
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": false,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"globals": {
"angular": false
}
}
I guess it's something with the globals option? I tried to add "_": false but no luck. Any ideas?

I had this issue as well.
I installed underscore: bower install -save underscore and it worked fine in the code. Unfortunately jshint was not finding that reference. You must tell jshint about your global variables in configuration file like .jshintrc:
{
…
"globals": {
"angular": false,
"_": false
}
}
If you continue to have this issue you need to make sure that underscore is included when jshint is executed. I would not recommend setting -W117 to true. Squelching those errors might lead to more bugs.

Can't get Grunt `watch` task to run?

Below is my Grunt file. My watch:news command doesn't appear to work and I'm not sure why.
When I run in verbose mode I can see that all the NPM modules are loaded without an issue, and it verifies that the watch:news task is running as it should be but then it just doesn't pick up that any changes have occurred?
I'm sure it's probably a typo or some small/easily fixable issue, I just can't spot it?
Any help greatly appreciated!
module.exports = function (grunt) {
/*
Grunt installation:
-------------------
npm install -g grunt-cli
npm install -g grunt-init
npm init (creates a `package.json` file)
Project Dependencies:
---------------------
npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-requirejs --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-imagemin --save-dev
Example Usage:
--------------
grunt -v
grunt release -v
*/
// Project configuration.
grunt.initConfig({
// Store your Package file so you can reference its specific data whenever necessary
pkg: grunt.file.readJSON('package.json'),
dir: {
static: './tabloid/webapp/static/',
static_js: '<%= dir.static %>' + 'js/',
static_sass: '<%= dir.static %>' + 'sass/',
static_css: '<%= dir.static %>' + 'stylesheets/',
static_img: '<%= dir.static %>' + 'img/'
},
jshint: {
files: ['<%= dir.static %>**/*.js',
'!<%= dir.static_js %>jasmine/lib/**/*.js',
'!<%= dir.static_js %>build.js',
'!<%= dir.static_js %>compiled/**/*.js',
'!<%= dir.static_js %>locator/**/*.js',
'!<%= dir.static_js %>msie/**/*.js',
'!<%= dir.static_js %>vendor/**/*.js'],
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true,
multistr: true,
newcap: false,
globals: {
// AMD
module: true,
require: true,
requirejs: true,
define: true,
// Environments
console: true,
// General Purpose Libraries
$: true,
jQuery: true,
EventEmitter: true,
// Testing
sinon: true,
describe: true,
it: true,
expect: true,
beforeEach: true,
afterEach: true
}
}
},
requirejs: {
compile: {
options: {
baseUrl: '<%= dir.static_js %>',
paths: {
'jquery-1': 'vendor/jquery-1/jquery.min',
'jquery': 'vendor/jquery-2/jquery.min',
'domReady': 'vendor/require/domReady',
'translation': 'module/translations/news'
},
exclude: ['config', 'jquery' ],
name: 'define',
out: '<%= dir.static_js %>compiled/all.js',
fileExclusionRegExp: /^\.|node_modules|Gruntfile|\.md|package.json/
}
}
},
sass: {
dist: {
options: {
style: 'compressed',
require: ['<%= dir.static_sass %>helpers/url64.rb']
},
expand: true,
cwd: '<%= dir.static_sass %>',
src: ['*.scss', '!_*.scss'],
dest: '<%= dir.static_css %>',
ext: '.css'
},
dev: {
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true,
require: ['<%= dir.static_sass %>helpers/url64.rb']
},
expand: true,
cwd: '<%= dir.static_sass %>',
src: ['*.scss', '!_*.scss'],
dest: '<%= dir.static_css %>',
ext: '.css'
},
news: {
options: {
style: 'expanded',
debugInfo: true,
lineNumbers: true,
require: ['<%= dir.static_sass %>helpers/url64.rb']
},
expand: true,
cwd: '<%= dir.static_sass %>/services/news/',
src: ['*.scss'],
dest: '<%= dir.static_css %>/services/news/',
ext: '.css'
}
},
// `optimizationLevel` is only applied to PNG files (not JPG)
imagemin: {
png: {
options: {
optimizationLevel: 7
},
files: [
{
expand: true,
cwd: '<%= dir.static %>img/',
src: ['**/*.png'],
dest: '<%= dir.static %>img/',
ext: '.png'
}
]
},
jpg: {
options: {
progressive: true
},
files: [
{
expand: true,
cwd: '<%= dir.static %>img/',
src: ['**/*.jpg'],
dest: '<%= dir.static %>img/',
ext: '.jpg'
}
]
}
},
// Run: `grunt watch -v` from command line for this section to take effect
// The -v flag is for 'verbose' mode, this means you can see the Sass files being compiled along with other important information
watch: {
all: {
files: ['<%= jshint.files %>', '<%= sass.dev.src %>'],
tasks: ['default']
},
news: {
files: ['<%= sass.news.src %>'],
tasks: ['news']
}
}
});
// Load NPM Tasks
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default Task
grunt.registerTask('default', ['jshint', 'sass:dev']);
// News Task
grunt.registerTask('news', ['sass:news']);
// Release Task
grunt.registerTask('release', ['jshint', 'requirejs', 'sass:dist', 'imagemin']);
};

Figured out the problem was to do with watching <%= sass.news.src %> which doesn't work as we're using Grunt's expanded directory globbing.
The solution was to directly reference the folder I wanted to watch: <%= dir.static_sass %>**/*.scss'