Другое

Пример gulpfile.js

📅 👨‍💻 admin 👁 197 просмотров

Необходимо установить компоненты. Версия пакета gulp должна быть 4-ой:

npm install gulp gulp-sass gulp-sass-glob gulp-concat gulp-uglify-es gulp-clean-css gulp-rename gulp-changed gulp-util gulp-cssimport browser-sync gulp-autoprefixer node-sass -D

gulpfile.js

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    sassGlob = require('gulp-sass-glob'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify-es').default,
    cleanCSS = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    changed = require('gulp-changed'),
    gutil = require('gulp-util'),
    cssimport = require('gulp-cssimport'),
    browsersync = require('browser-sync').create(),
    autoprefixer = require('gulp-autoprefixer');

sass.compiler = require('node-sass');

function commonJs() {
    return gulp.src('app/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('public/js'))
}

function vendorJs() {
    return gulp.src([
        'node_modules/inputmask/dist/inputmask.min.js',
    ])
        .pipe(concat('vendor.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/js'))
        .pipe(gutil.noop());
}

function css() {
    return gulp.src([
        'app/css/*.css',
        'app/css/*.scss',
        ])
        .pipe(sassGlob())
        .pipe(sass().on('error', sass.logError))
        .pipe(cssimport({matchPattern: '*.css'}))
        .pipe(cleanCSS())
        .pipe(gulp.dest('public/css'))
        .pipe(gutil.noop());
}

// function webfonts() {
//     return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
//         .pipe(gulp.dest('public/webfonts'))
//         .pipe(gutil.noop());
// }

function fonts() {
    return gulp.src('app/fonts/**/*.**')
        .pipe(gulp.dest('public/fonts'))
        .pipe(gutil.noop());
}

function images() {
    return gulp.src('app/img/**/*.**')
        .pipe(changed('public/img'))
        .pipe(gulp.dest('public/img'))
        .pipe(gutil.noop());
}


function html() {
    return gulp.src(['app/*.html'])
        .pipe(changed('public/*.html'))
        .pipe(gulp.dest('public'))
        .pipe(gutil.noop());
}

function browsersyncServer(cb) {
    browsersync.init({
        server: {
            baseDir: "./public/"
        },
        notify: false
    });

    cb();
}

function browsersyncReload(cb) {
    browsersync.reload();
    cb();
}

function watchTask() {
    gulp.watch('app/*.html', gulp.series(html, browsersyncReload));
    gulp.watch(['app/css/*.css', 'app/css/*.scss'], gulp.series(css, browsersyncReload));
    gulp.watch('app/img/*.**', gulp.series(images, browsersyncReload));
    gulp.watch('app/js/*.js', gulp.series(commonJs, browsersyncReload));
}

exports.default = gulp.series(
    html,
    fonts,
//    webfonts,
    css,
    images,
    vendorJs,
    commonJs,
    browsersyncServer,
    watchTask,
);