# Gulp 4

{% hint style="info" %}
Please replace the gulpfile.js and package json file in the folder. make sure delete package-lock.json and node\_modules
{% endhint %}

{% tabs %}
{% tab title="Package.json" %}

```javascript
{
  "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"
  }
}

```

{% endtab %}

{% tab title="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')));

```

{% endtab %}
{% endtabs %}