The error, this is not preferred. The scss task

The gulpfile.js CSS function

In this part the CSS task will be described, this task
is used to optimize the CSS that is outputted to our src/css and dist/css
folders.

We Will Write a Custom Essay Specifically
For You For Only $13.90/page!


order now

// scss – build the scss to the src css folder

gulp.task(“scss”, () => {

    $.fancyLog(“-> Compiling scss”);

    return gulp.src(pkg.paths.src.scss + pkg.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 CSS

gulp.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 the
first 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 this
it is possible to chain multiple tasks together.

In the above code snippet of the gulpfile.js this means
that the css task first runs the scss task, this is done to make sure first all
the SASS files get compiled into regular CSS. The scss task also makes sure
that there will be no interruption of the stream when an error is encountered
by using the plumber package. If no such package is used the script will stop
running on any error, this is not preferred. The scss task also creates a
sourcemap. Sourcemaps make it easier to debug code as it will show the line the
error occurred on in the browser. Finally it will place the created files into
the src/css/ folder. Because browser-sync is constantly checking for changes, every
time 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 start
running. The css task uses autoprefixer, this will parse the CSS and add vendor
prefixes to CSS rules using values from Can I Use. The autoprefixer uses data
on 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 using
browser. It also uses “last 2 versions”, which only adds prefixes that are
supported by the last 2 versions of the selected browsers.

Figure 1 – Browsers supported when using the prefixes stated in the above
code snippet
From http://browserl.ist/?q=last+2+versions%2C+%3E1%25

Based 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 to
make the file as small as possible. Combining all the CSS into one file has the
advantage that, when a website is visited, the visitors have to do less HTTP
requests, this means faster page loads and thus less visitors leaving the
website pre-emptively.

// distcss task – combine & minimize any source CSS
into the src/combined css folder

gulp.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, the
combined, autoprefixed and minified CSS file will be copied to the distribution
(dist/) folder.