Gulp. Как ускорить верстку? Установка Gulp 4 gulp-autoprefixer, gulp-clean-css. Урок 3

Hello! we are on the codefocus channel. And now we will learn how to speed up our layout. More specifically: ask gulp
automatically add prefixes for older browsers. And especially for our
favorite internet explorer browser. Or as, according to prophecy, it is called “donkey”: D Let’s open our previous developments. Open our folder. And now we will create an index.html file Call Gulp test here. Here, for example, let’s do
anything quite simple … some headline and some content try to write lorem in the content and he will tell us Now we color everything align so that
We were all visible. And hierarchically. Now let’s make the css file,
style sheet, because we will work with it today. And for example, we write some styles By the way, I can share a little life hack: here we have the markup let’s write another class. copy our markup open the browser
and write there: “extract css” here we have a website here we can insert our markup click “extract” and we will have all our classes, copy-paste it greatly simplifies and speeds up
work. For simplicity, let’s write color. We set the content to display: flex. we
we want to check our prefixes. And we will write the content of the text: color: brown.
Save, now we need to connect our stylesheet now let’s see saved and dragged but does not work: D okay drag it from our test folder here wonderful only
style sheet we did not connect let’s two rel attributes were missing
and type let’s see with the inspector probably hard to see brown content and the title is blue gulp assistant autoprefixer our documentation tells us npm install –save-dev gulp-autoprefixer, copy .. take our terminal – insert, wait for it to install perfectly it is delivered, you can
check in package.json gulp autoprefixer stands Now
open our gulpfile, take an example of use and insert gulp has already been announced, so the second time we don’t need it further function which is called
default I propose to call her styles we take
style from src app.css folder, but we have a style called style.css and are at the root we just write styles.css say autoprefixer
will work and cram the dist folder there is no dist folder we can do our for example it will be styles_ready this is just an example you can name whatever and now we will try to run perfectly styles worked,
now let’s check it out. here we have display: flex and it added the prefixes for more detailed settings, refer to the documentation let’s add our minifier, in order for us page loaded faster in order
so that unnecessary classes are deleted from us … gulp can do it all no need to run around
the project has to look for it manually in the search we will write gulp styles minify he offers clean css and
minify, oh go to minify it was a special example, it says here –
please use gulp-clean-css go to gulp-clean-css and act
also according to the instructions we install it first then take an example of use and paste into our gulpfile here we see the gulp declaration, which we also need more, we delete it let’s make it all the same – let’s do it clean-css is declared, we check clean-css and our task in gulp minify-css for
so that everything is the same offering her just rewrite a little bit but fine next we rename let’s just call mini now we are with you
take the file we already made and it is called styles.css in the folder
styles_ready make styles_minify folder this
just for example and run in style_minify our styles are fully
minified like this just working with gulp and now you’ll think:
“do I really need to do autoprefix first and then minify?” no it is possible
do it all in one place first we take autoprefix, and then
minify just take the line copy-paste delete because we
do it all as an example our old folders image .. no-no-no styles_minify styles_ready and run gulp styles I draw now
your attention we take the style.css file and cram into styles_ready you can write styles build that’s it later, run gulp styles and now we will see what we have appeared both minifications and autoprefixes gulp makes life easier for us

Add a Comment

Your email address will not be published. Required fields are marked *