I'm trying to do test to use correctly SASS and I want create a file style.css and that file minify to style.min.css
sass --watch sass/style:css --style compressed
That works well but I need automate proccess doing compile & minify at the same time.
I've found this code in other stackoverflow:
sass --watch sass/style.scss:css/style.css --watch css/style.css:css/style.min.css --style compressed --scss
but now dont work how I want that works.
Also at Sass webpage the code is different now on 2020.
https://sass-lang.com/documentation/cli/dart-sass#style
I'm not use gulp tool because I think it not neccesary for Wordpress projects.
Anybody may help me?
Irrespective of what you're building your site in, if you want total control over compilation/minification/whatever then well, that's what tooling such as gulp is there for.
It looks like you were trying to compile SCSS to CSS to a file, then take that compiled CSS file and minify it. That CLI tool won't do that, but it can absolutely do the compilation/compression at the same time, directly from the source SCSS.
Using the binary you're using, this is going to compile and compress, taking ./sass/style.scss and outputting the result to ./css/style.min.css
sass sass/style.scss:css/style.min.css --style compressed
Add --watch if you want to have it react to file changes in your scss file.
Or perhaps you were trying to get a unminified and a minified version alongside. In that case, you'll simply have to run two commands. Again, gulp is there to automate this process.
Other binaries will have different flags and options, and of course there is the gulp option which I'd certainly recommend given you then don't have to remember any lengthy commands and you can share your chosen structure/tasks accross projects.
Related
I'm using webpack to compile my sass into css and to transpile my js. The problem I'm facing is when I'm using webpack-dev-server and I make a change to my sass files, the js recompiles too, this can take some time depending on how much js I have, so I would like to know if it's possible to make webpack 4 only recompile the css and not js, or if it must compile both, how do I make it output my css first and then work on the js?
webpack.config.js
In my react app created using create-react-app the final production build comes out with a 2.3MB of JS file and 300kb of CSS file (very little CSS).
When I run the command npm run build which uses react-scripts to take build shows that is taking optimised build for production.
I even tried to force it with npm run build --env=production, still the same unoptimised output.
what I feel missing is uglifyjs and `minification of JS files is not being done, As I See my js files are not min.js.
Also final output says it has gzip compressed and it's size is around 400kb of js File ,if that is so how do i serve my files to improve optimisation.
P.S: I also tried some of solution where it suggested to exclude the Generation map to reduce size , but I feel that reduces the overall build size but still not the JS file individually.
If you really want a smaller bundle size you could try code splitting with webpack. For this you want to have control over your webpack configuration and therefore you would have to eject your create-react-app setup.
After this we can configure webpack in such a manner that it will uses code splitting. Code splitting simply produces multiple bundels instead of one big bundle of code with all of its dependencies. We then can on send only the bundle which is necessary for a certain page, and load all of the remaining bundles in the background.
All of this when done properly can significantly lower the initial load time of your react application.
Here you can find how to implement code splitting
I deployed my application, I find that the loading time is much .. there isa way to compress css and js files ? , knowing that I use in each page that the necessary and sometimes js version minified .. thank you
In my experience with compressing JS files, use UglifyJS, and CSS files I prefer using Compass with Sass, which not only can minify CSS files, but also support the superior (personal opinion) SCSS-syntax.
Both engines work well along with GruntJS, which is a NPM module and a tool to perform various tasks. I use the following plugins with Grunt:
Grunt-contrib-compass for the Compass tasks
Grunt-contrib-uglify for the UglifyJS tasks
Additionally Grunt-contrib-concat if you just want to concatenate various files
And several other modules to run a local server, optimize images, etc. Have a look at the plugins page for GruntJS.
Is it possible to set a "compiler" option to compile more TypeScript files in one project to one JavaScript file?
The only solution I can find is passing multiple files to the "tsc" manually by hand, but I'd like to use the features of the IDE Visual Studio 2012.
I am using bundling to do this in ASP.NET. You can use bundling with MVC or Web Forms.
If you are using Web Essentials, you will already be getting both a .js and a .min.js and bundling is clever enough to use the .js files at debug time and the minified versions in production - so you can debug easily but get smaller files in live.
You can read all about Bundling and Minification on the ASP.NET site.
However, if you want TypeScript to bundle the file (it won't minify it) you just need to use the following flag:
tsc --out combined.js app.ts
TypeScript will walk the dependencies and sort out the ordering for you so all you need to worry about is minifying the combined file.
I'm trying to use YUI compressor in a maven goal, but I'm pretty new to the inner workings of maven. I see that I can copy all js to a new directory with the following:
<copy todir="blah">
<fileset>
<!-- A bunch of file extension types -->
</fileset>
</copy>
Now, for each css and js file, I want to run the run the yui compressor and output the file to the final locations of the files copied above. Not that directory structure is maintained in the copy given above, so that may be something to consider when creating the maven goal.
Where do I start? I essentially need to run
java -jar yuicompressor input.js -o output.js
on all files. I'm restricted to maven 1.x, so where do I start? I want to make this a maven goal to avoid having to compress js by hand before a build, as that would be sloppy. If I could execute an external python/perl script to do this, that would be fine also, but I think that there is perhaps a better maveny way to do this.
Use YUI compressor ant task and follow the tutorial.
YUI ant task.