Gulp 4

To use gulp version 4 use the following files

Please replace the gulpfile.js and package json file in the folder. make sure delete package-lock.json and node_modules

Package.json
gulpfile.js
Package.json
{
"name": "atmos-admin-panel",
"version": "1.0.0",
"description": "A beautiful Design System build on Bootstrap 4.",
"main": "gulpfile.js",
"author": "atomui.com",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"browser-sync": "^2.26.12",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-cached": "^1.1.1",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.3.0",
"gulp-file-include": "^2.2.2",
"gulp-gh-pages": "^0.5.4",
"gulp-html-extend": "^1.1.6",
"gulp-if": "^3.0.0",
"gulp-markdown": "^5.1.0",
"gulp-npm-dist": "^1.0.3",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
"gulp-useref": "^4.0.1"
}
}
gulpfile.js
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const browsersync = require('browser-sync').create();
const clean = require('gulp-clean');
const cleancss = require('gulp-clean-css');
const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
// Extra included dependencies
const {src, task}= require('gulp');
const paths = {
src: {
html: {
files: './src/html/**/*.html',
},
js: {
files: './src/js/**/*.js'
},
scss: {
files: './assets/scss/atmos.scss'
},
},
dist: {
base: {
dir: './'
},
css: {
dir: 'assets/css',
files: 'assets/css/**/*.css',
minFiles: 'assets/css/**/*.min.css',
},
html: {
files: 'dist/**/*.html'
},
js: {
dir: 'dist/assets/js',
files: 'dist/assets/js/**/*.js',
minFiles: 'dist/assets/js/**/*.min.js'
},
},
node: {
dir: './node_modules'
},
package: {
files: './package.json'
}
};
gulp.task('browsersync', callback => {
browsersync.init({
server: {
baseDir: paths.dist.base.dir,
// Added so that we can have the server use base urls vs requiring .html
serveStaticOptions: {
extensions: ["html"]
}
}
});
callback();
});
gulp.task('browsersyncReload', callback => {
browsersync.reload();
callback();
});
gulp.task('clean', () => {
return gulp.src([paths.dist.css.dir, paths.dist.html.files, paths.dist.js.dir, paths.dist.libs.dir], {
allowEmpty: true,
read: false
})
.pipe(clean());
});
gulp.task('clean', () => {
return gulp.src([paths.dist.css.dir], {
allowEmpty: true,
read: false
})
.pipe(clean());
});
gulp.task('clean:js', () => {
return gulp.src([paths.dist.js.files, `!${paths.dist.js.minFiles}`], {
read: false
})
.pipe(clean())
});
gulp.task('js', () => {
return gulp
.src(paths.src.js.files)
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(gulp.dest(paths.dist.js.dir))
});
gulp.task('scss', () => {
return gulp
.src(paths.src.scss.files)
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cleancss())
.pipe(rename("atmos.min.css"))
.pipe(gulp.dest(paths.dist.css.dir))
.pipe(browsersync.stream());
});
gulp.task('watch', () => {
gulp.watch([paths.src.html.files],
gulp.series('browsersyncReload'));
gulp.watch(paths.src.scss.files, gulp.series('scss'));
});
gulp.task('default', gulp.series('clean', gulp.parallel( 'scss'), gulp.parallel('browsersync', 'watch')));