Using "lodash": "^4.17.5",
Why is Lodash that big after doing : webpack ?
It looks like the sourceMapping is bloating the file...
sourceURL=[module]\n//
sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiOC5qcyIsInNvdXJjZXMiOlsiQzpcXGluZXRwdWJcXHd3d3Jvb3RcXFdlYlBhY2tfVHlwZVNjcmlwdF9TZXR1cF9FeGFtcGxlXFxub2RlX21vZHVsZXNcXGxvZGFzaFxcbG9kYXNoLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIExvZGF.......
...
.
.
.
I have used webpack with option parameters like this:
webpack -d --env.dev --display-modules --progress --display-error-details"
The "problem" here is the -d flag.
Development shortcut -d: Equals to --debug --devtool source-map
--output-pathinfo
CLI reference
Removing the flag shortens the lodash.js file size to 70kb, because it does not include the source-mapping data anymore.
Related
I have an app where I would like to compile all my handlebars template/partials
The command I execute is (npx cause is a local package) =>
Build Views
npx handlebars ./public/templates/views -f ./public/templates/view.js --extension 'hbs'
Build Template
npx handlebars ./public/templates/partials -f ./public/templates/partials.js --extension 'hbs'
It work if I run them independently
now, I tried to combine them,
"scripts": {
"hbs": "npx handlebars ./public/templates/views -f ./public/templates/view.js --extension 'hbs' && npx handlebars ./public/templates/partials -f ./public/templates/partials.js --extension 'hbs'",
},
but the command do not run, instead, I get prompted with the library !help like if the command is invalid.
Is there something I miss ?
Per comments on question, the single quotes are being incorrectly included into the --extension option for handlebars. The suggested format for the script is:
"scripts": {
"hbs": "handlebars ./public/templates/views -f ./public/templates/view.js --extension hbs && handlebars ./public/templates/partials -f ./public/templates/partials.js --extension hbs",
},
I have following setup under my project:
/assets/scss has many SCSS files organized under different subdirectories; including a root global.scss file. As you can imagine, global.scss will only have #imports.
/assets/css is set as output directory. I am trying to output only one file under this folder - global.css.
package.json has this command
"scripts": {
"scss": "node-sass --watch assets/scss/styleguide.scss -o assets/css --recursive"
}
When I run npm run scss it outputs subdirectory CSS files as well. Does anyone know how to avoid output of subdirectory sass files?
Thanks in advance!
You are passing the --recursive argument to node-sass. That will mean that node-sass will search recursively on every directory under assets/scss and will compile all the scss files found. To avoid that behavior just remove the --recursive option:
"scripts": {
"scss": "node-sass --watch assets/scss/styleguide.scss -o assets/css"
}
More about node-sass usages and options can be found here.
Simple one, but could not find the answer anywhere online! Installed sass globally (npm install -g sass) on my Mac.
This works as expected:
sass style.scss style.css
Then I try:
sass --watch style.scss:style.css
And get:
Could not find an option named "watch".
Usage: sass <input> [output]
--[no-]stdin Read the stylesheet from stdin.
--[no-]indented Use the indented syntax for input from stdin.
-I, --load-path=<PATH> A path to use when resolving imports.
May be passed multiple times.
-s, --style=<NAME> Output style.
[expanded (default), compressed]
-c, --[no-]color Whether to emit terminal colors.
-q, --[no-]quiet Don't print warnings.
--[no-]trace Print full Dart stack traces for exceptions.
-h, --help Print this usage information.
--version Print the version of Dart Sass.
What am I missing??
Thanks!!
First create the SASS's folder, and in there create your SASS's file. Example:
sass/styles.sass
In your project root folder, open the console and type the command:
sass --watch sass/styles.sass:css/styles.css
This command will create your CSS's folder and CSS's file. In addition to compiling your .sass content for your .css.
In the end, I gave up on sass as tried above, and went for a solution with webpack.
Another option I tried which worked was to use node-sass.
I solved running this command on your terminal
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
i hope that help
Is it possible to generate fully working sourcemaps using node-sass and postcss autoprefixer when piping output from one to another? I currently have the following in package.json:
"scripts": {
"sass": "node-sass sass/app.scss --source-map true --source-map-embed true",
"postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
"css": "npm run sass -s | npm run postcss:autoprefixer -s > css/app.css"
}
This produces a semi-working inline sourcemap, but the links to original files are incorrect, so clicking on them in Chrome devtools won't load them (it seems like they are processed as relative links and then referenced from the css folder). I tried to fix this by adding the --source-map-contents true option to node-sass, but then autoprefixer bugs out, I suspect because it doesn't like the line length of the dataUri.
Ideally I'd prefer to output a separate .map file anyway, but setting the node-sass option to --source-map css/app.css.map doesn't write anything out, presumably because only the css is output to stdout.
Replacing source-map with source-map-root and a filesystem URL seems to do the trick:
"scripts": {
"sass": "node-sass sass/app.scss --source-map-root file://${PWD}/ --source-map-embed true",
"postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
"css": "npm run sass -s | npm run postcss:autoprefixer -s > css/app.css"
}
Would still be good to know if it was possible to output separate .map files though!
Update:
Below is the new package.json using exorcist as recommended by RyanZim's comment:
"scripts": {
"sass": "node-sass sass/app.scss --source-map-root file://${PWD}/ --source-map-embed true",
"postcss:autoprefixer": "postcss --use autoprefixer -b 'last 2 versions' --map",
"css": "npm run sass -s | npm run postcss:autoprefixer -s | exorcist css/app.css.map > css/app.css"
}
Try:
sass input.scss:output.css
I've run browserify like this:
browserify js/app.js -d | exorcist js/bundle.js.map > js/bundle.js
When I load this in Chrome, the sources map file is fine. When I uglify it like this:
uglifyjs js/bundle.js --in-source-map js/bundle.js.map --source-map-url bundle2.js.map --source-map js/bundle2.js.map -o js/bundle2.js -p 1
The sources map file does not work. It tries to load sources from /js/js, instead of just from /js. I have fiddled with the -p parameter, and every other parameter that is documented on the commandline here:
https://github.com/mishoo/UglifyJS2
The only way I could get this to work was to cd into the js directory and run the commands from there. Lame, but it works.
-p relative
fixed the issue for me