The error, this is not preferred. The scss task

The gulpfile.

js CSS functionIn this part the CSS task will be described, this taskis used to optimize the CSS that is outputted to our src/css and dist/cssfolders.// scss – build the scss to the src css foldergulp.task(“scss”, () => {    $.fancyLog(“-> Compiling scss”);    return gulp.src(pkg.paths.src.scss + pkg.

Best services for writing your paper according to Trustpilot

Premium Partner
From $18.00 per page
4,8 / 5
4,80
Writers Experience
4,80
Delivery
4,90
Support
4,70
Price
Recommended Service
From $13.90 per page
4,6 / 5
4,70
Writers Experience
4,70
Delivery
4,60
Support
4,60
Price
From $20.00 per page
4,5 / 5
4,80
Writers Experience
4,50
Delivery
4,40
Support
4,10
Price
* All Partners were chosen among 50+ writing services by our Customer Satisfaction Team

vars.scss)        .pipe($.plumber((error) => {            $.util.log($.

util.colors.red(error.message));        }))        .pipe($.

sourcemaps.init({ loadMaps:true }))        .pipe($.

sass())        .pipe($.sourcemaps.write(“./”))        .pipe($.size({ gzip: true, showFiles: true }))        .

pipe(gulp.dest(pkg.paths.src.css));}); // css task – combine & minimize any source CSSgulp.task(“css”, “scss”, () => {    var plugins =         $.autoprefixer({ browsers: “> 1%”, “last 2 versions” }),        $.

cssnano({            discardComments: {                removeAll:true            },            discardDuplicates: true,            discardEmpty: true,            minifyFontValues: true,            minifySelectors: true        })    ;    $.fancyLog(“-> Building and minimizing css”);    return gulp.src(pkg.

globs.css)        .pipe($.plumber((error) => {            $.util.

log($.util.colors.red(error.message));        }))        .pipe($.print())        .pipe($.

sourcemaps.init({ loadMaps: true }))        .pipe($.concat(pkg.vars.siteCssName))        .

pipe($.postcss(plugins))        .pipe($.header(banner, { pkg: pkg }))        .pipe($.sourcemaps.

write(“./”))        .pipe($.size({ gzip: true, showFiles: true }))        .pipe(gulp.

dest(pkg.paths.src.cssCombined))        .pipe($.

browserSync.reload({            stream: true        }));});To a gulp.task() method thefirst parameter is the name of the task. The second parameter are the dependencies.When a task executes it will always first run the dependencies, because of thisit is possible to chain multiple tasks together.

In the above code snippet of the gulpfile.js this meansthat the css task first runs the scss task, this is done to make sure first allthe SASS files get compiled into regular CSS. The scss task also makes surethat there will be no interruption of the stream when an error is encounteredby using the plumber package. If no such package is used the script will stoprunning on any error, this is not preferred. The scss task also creates asourcemap. Sourcemaps make it easier to debug code as it will show the line theerror occurred on in the browser. Finally it will place the created files intothe src/css/ folder.

Because browser-sync is constantly checking for changes, everytime a change is made in the SASS files, these files will be compiled to CSS.After the scss task is done, the css task will startrunning. The css task uses autoprefixer, this will parse the CSS and add vendorprefixes to CSS rules using values from Can I Use. The autoprefixer uses dataon the popularity of browsers, in the above code snippet it states “> 1%”.This means all browsers that are used by more than 1% of the population usingbrowser. It also uses “last 2 versions”, which only adds prefixes that aresupported by the last 2 versions of the selected browsers.

Figure 1 – Browsers supported when using the prefixes stated in the abovecode snippetFrom http://browserl.ist/?q=last+2+versions%2C+%3E1%25Based on this information, it arranges and deletes the prefixes.It can help to get prefixes for animations, transition, transform, grid, flex,flexbox and others. CSSNano takes out all the unused and unnecessary CSS tomake the file as small as possible. Combining all the CSS into one file has theadvantage that, when a website is visited, the visitors have to do less HTTPrequests, this means faster page loads and thus less visitors leaving thewebsite pre-emptively.// distcss task – combine & minimize any source CSSinto the src/combined css foldergulp.task(“distcss”, “css”, () => {    $.

fancyLog(“-> Copying css”);    return gulp.src(pkg.paths.src.

cssCombined + pkg.vars.all)        .pipe(gulp.dest(pkg.paths.

dist.css))}); When done building and using the build task, thecombined, autoprefixed and minified CSS file will be copied to the distribution(dist/) folder.