// npm i -D autoprefixer gulp-clean-css gulp-concat del gulp gulp-postcss gulp-px-to-rem gulp-sass gulp-sourcemaps
'use strict';
// Import Requirements
const autoprefixer = require('autoprefixer');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const del = require('del');
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const px2rem = require('gulp-px-to-rem');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
// Custom Variables
const src = '.';
const dist = './dist';
const scss = [src + '/scss/index.scss'];
const css = 'index.css';
const baseFontSize = 16; // base font size in pixel
const postCssPlugins = [
autoprefixer() // Use .browserslistrc
];
/**
* Sub-Task: Build CSS
*
* - Compile SCSS -> CSS
* - Add Browserprefixes
* - Minify
* - Concat to a single File
* - Create Sourcemaps
*/
gulp.task(
'build:css',
() =>
gulp
.src(scss)
.pipe(sourcemaps.init()) // init sourcemaps
.pipe(sass()) // do the sass
.pipe(postcss(postCssPlugins))
.pipe(cleanCSS()) // cleanup & minify
.pipe(px2rem({ rootPX: baseFontSize })) // convert pixels to rem
.pipe(concat(css)) // zusammenführen der Dateien (hier nur eine)
.pipe(sourcemaps.write('.')) // write sourcemaps
.pipe(gulp.dest(dist)) // output
);
/**
* Task: Watch
*/
gulp.task('watch', function(cb) {
// Watch SCSS
gulp.watch(src + '/scss/**/*.scss', gulp.series('build:css'));
cb();
});
/**
* Task: Clean
*
* - Remove the Distribution folder
*/
gulp.task('clean', () => {
return del([`${dist}**/*`]);
});
/**
* Task: Build
*
* The Distribution of this build can be deployed
*
* - Start Task "Clean"
* - Start Sub-Tasks
*/
gulp.task(
'build',
gulp.series(
'clean',
gulp.parallel(
'build:css'
)
)
);
/**
* Task: Serve
*
* Start a local server to serve files from dist/
*/
gulp.task('serve', gulp.series('build', gulp.parallel('watch')));
Including:
- Autoprefixer
- Pixel to rem
Usage:
$ gulp serve
- Autoprefixer
- Pixel to rem
Usage:
$ gulp serve
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.