How can I remove all console.log from production. This code isn't working on laravel-mix 4.x:
webpack.mix.js
mix
.js('resources/js/app.js', 'public/js')
if (mix.inProduction()) {
mix.options({
uglify: {
uglifyOptions: {
warnings: false,
comments: false,
beautify: false,
compress: {
drop_console: true,
}
}
}
});
mix.version();
}
With laravel-mix 4.x they replaced uglify with terser (Changelog). You have to change your webpack.mix.js:
if (mix.inProduction()) {
mix.options({
terser: {
terserOptions: {
compress: {
drop_console: true
}
}
}
});
mix.version();
}
Related
I was trying to run Cucumber files (.feature) with last version of Cypress 10.0.3, but I couldn't run it. After I finished the configuration, I could see the featur file in Cypress interface but if I try to run it, Cypress give me an error back (see screenshot).
My webpack file:
module.exports = {
resolve: {
extensions: [".cy.ts", ".cy.js"]
},
node: {fs: "empty", child_process: "empty", readline: "empty"},
module: {
rules: [
{
test: /\.cy.ts$/,
exclude: [/node_modules/],
use: [
{
loader: "ts-loader"
}
]
},
{
test: /\.cy.feature$/,
use: [
{
loader: "cypress-cucumber-preprocessor/loader"
}
]
},
{
test: /\.cy.features$/,
use: [
{
loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
}
]
}
]
}
};
My Cypress.config.ts:
import { defineConfig } from "cypress";
export default defineConfig({
fileServerFolder: ".",
fixturesFolder: "./cypress/fixtures",
video: true,
videosFolder: "./cypress/videos",
videoUploadOnPasses: false,
screenshotsFolder: "./cypress/screenshots",
chromeWebSecurity: false,
requestTimeout: 60000,
responseTimeout: 60000,
defaultCommandTimeout: 60000,
reporter: "cypress-multi-reporters",
numTestsKeptInMemory: 1,
reporterOptions: {
configFile: "cypress/reporter-config.json",
},
e2e: {
specPattern: "**/*.cy.feature",
// testFiles:
},
})
Screenshot:
https://user-images.githubusercontent.com/93645203/172401189-52032d06-7ffa-45a6-8be7-fc7df2ecdf4e.png
Please install cypress-cucumber-preprocessor#l1.0.0 for a fix for this issue.
It's fixed with Cypress V 10.3.0
I am using webpack file-loader to include images in my build. Webpack compiles fine and copies images from dev/assets to dist/images
BUT the tag in the generated HTML is wrong:
<img src="/dist/images/triangle.svg">
It should be:
<img src="./images/triangle.svg">
Is my webpack config wrong for file-loader?
.vue file:
<div>
<img src='./images/thing.png'>
</div>
.style {
background: url('./images/anotherthing.png');
}
Webpack config (simplified)
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}
]
}
webpack config (complete)
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, './dist/'),
publicPath: './',
filename: 'js/build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
}
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath:'./images/'
}
},
{
test: /\.(json)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './data/'
}
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
contentBase: './dist',
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
You probably just want to set publicPath: '/'.
Think of publicPath as the directory of your assets relative to the root of the public facing domain. If your server is serving files from /dist to example.com, that would mean that assets in /dist/images are publicly accessible at example.com/images (file-loader already adds the /images bit as you've witnessed).
I am trying to include a call to grunt-contrib-compass in my watch task, but it's not registering any saved changes to my .scss files. grunt compass works fine, and grunt watch records all other changes to *.php as expected. What's a guy doing wrong here?
gruntfile.js:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.initConfig({
compass: {
dev: {
options: {
config: 'config.rb'
} //options
} //dev
}, //compass
watch: {
options: { livereload: true },
scripts: {
files: ['/scripts/*.js'],
}, //scripts
sass: {
files: ['/_sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.php']
} //html
} //watch
}) //initConfig
grunt.registerTask('default', 'watch');
} //exports
And just for kicks, my config.rb:
css_dir = '/css'
sass_dir = '/_sass'
output_style = :nested
Your leading '/' in all your paths are throwing you off, remove them (both from gruntfile and config.rb):
watch: {
options: { livereload: true },
scripts: {
files: ['scripts/*.js'],
}, //scripts
sass: {
files: ['_sass/*.scss'],
tasks: ['compass:dev']
}, //sass
html: {
files: ['*.php']
} //html
} //watch
I have a grunt project set up but I'm missing the sourcemap for sass. The style.css.map looks like this:
{
"version": 3,
"file": "style.css",
"sources": [
"../style.scss",
"../_general.scss",
"../_align.scss",
"../_cf.scss",
"../_fixed-fluid.scss"
],
"sourcesContent": [],
"mappings": "ACAA;EACI,AAAQ;EACR,AAAS;;AAGb;EACI,AAAY;;AAGhB;EACI,AAAe;;AAGnB;EACI,AAAU;EACd,AAAe;IACP,AAAS;IACT,AAAS;IACT,AAAQ;IACR,AAAY;IACZ,AAAU;IACV,AAAM;IACN,AAAO;IACP,AAAQ;;AAIhB;EACI,AAAS;;AC3Bb;EACE,AAAU;EACV,AAAQ;EACR,AAAY;;AAGd;EACE,AAAU;EACV,AAAK;EACL,AAAM;EACN,AAAW;;AAIb;EACI,AAAS;EACT,AAAO;EACP,AAAY;;AAGhB;EACI,AAAS;EACT,AAAY;EACZ,AAAgB;EAChB,AAAQ;;AAIZ;EACI,AAAY;EACZ,AAAQ;EACR,AAAW;EACf,AAAgB;IACR,AAAS;IACT,AAAS;IACT,AAAQ;IACR,AAAgB;;AAIxB;EACI,AAAS;EACT,AAAgB;;AC3CpB,AAAG;EACC,AAAS;EACT,AAAS;;ACFb;EACI,AAAO;EACP,AAAO;EACP,AAAY;;AAGhB;EACI,AAAO;EACP,AAAO;;AAIX;EACI,AAAO;EACP,AAAY;EACZ,AAAO;EACP,AAAc",
"names": []
}
The 'sources' path is incorrect. It should be "../sass/style.scss" instead of "../style.scss"
Grunt project file:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 9000,
livereload: true,
keepalive: true,
open: true,
hostname: 'localhost'
}
}
},
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true
},
dist: {
files: {
'dist/style.css': 'assets/sass/style.scss'
},
outputStyle: 'expanded'
}
},
autoprefixer: {
single_file: {
src: 'dist/style.css'
}
},
watch: {
options: {
spawn: false,
livereload: true,
},
sass: {
files: ['assets/sass/*.scss'],
tasks: ['sass', 'autoprefixer']
},
html: {
files: ['index.html', 'views/*.html'],
},
js: {
files: ['assets/js/*.js']
}
},
});
};
Anyone know how to configure this sourcemap path correctly in my gruntfile? Thank you!
Source maps have been f***ed in grunt-sass for a while, since version v.18.0 (node-sass v2) I think. I am patiently waiting for the downstream changes from libsass > node-sass to make their way to grunt-sass soon. Node-sass v3 should fix these issues.
I suggest reverting back to version v0.17.0 of grunt-sass so source maps work again
I want to create targets like this:
grunt/sass.js:
'use strict';
module.exports = {
alpha: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app2.scss'
}
}
}
};
Gruntfile.js:
module.exports = function (grunt) {
require('load-grunt-config')(grunt);
};
I can't get this working properly. Only when I recode the sass.js file into the following Grunt compiles it into CSS:
module.exports = {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app.scss'
}
}
};
How can I create those targets so I can execute commands like 'grunt sass:alpha', so I can create several templates.
Was able to solve it by changing grunt/sass.js to this:
'use strict';
module.exports = {
options: {
includePaths: ['bower_components/foundation/scss']
},
alpha: {
options: {
outputStyle: 'compressed'
},
files: {
'css/alpha.css': 'scss/app_alpha.scss'
}
},
beta: {
options: {
outputStyle: 'compressed'
},
files: {
'css/beta.css': 'scss/app_beta.scss'
}
}
};