gulp

https://gulpjs.com/

Сборщик проектов

В рабочей директории создать файл gulpfile.js

# установка
npm i -g gulp-cli

# запуск сборщика, задачи берет из gulpfile.js и выполняет таск default
gulp

# запустить конкретный таск
gulp test

gulp --gulpfile gulpfile2.js
// gulpfile.js

const gulp = require('gulp');

gulp.task('default', function(){
    console.log('hello world');
});

gulp.task('test', () => {
    console.log('hello world');
});
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const webpack = require('webpack-stream')

const webpackConf = {
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: //\.js$,
                loader: 'babel-loader',
                exclude: 'node-modules'
            }
        ]
    }
}

const config = {
    src: './src',
    css: {
        watch: '/precss/**/*.css',
        src: '/precss/project.css',
        dest: '/css'
    }
    html: {
        src: 'index.html'
    }
};

gulp.task('build', function(){
    gulp.src(config.src + config.css.src)
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.src + config.css.dest))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('watch', ['browserSync'], function(){
    gulp.watch(config.src + config.css.watch, ['build']);
});

gulp.task('browserSync', function(){
    browserSync.init({
        server: {
            baseDir: config.src
        }
    });
});

gulp.task('js', function(){
    return gulp.src('./src/index.js')
        .pipe(webpack(webpackConf))
        .pipe(gulp.dest(dest_path + 'js/'))
})

dest

dest(path[, options])

Копирует файлы в указанную папку

  • path - строка или функция, путь назначения

  • options - объект параметры

    • cwd - строка, рабочая директория

    • mode - число, права на файл

gulp.src('./src/precss/**/*.css')
    .pipe(gulp.dest('./src/'));

gulp.src('./client/templates/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('./build/templates'))
    .pipe(minify())
    .pipe(gulp.dest('./build/minified_templates'));

lastRun

lastRun()

Получение timestamp последней успещной задачи

paralellel

paralellel()

запуск задач паралельно

gulp.task(
    'paralellel_task',
    gulp.paralellel('task1', 'task2')
);

series

series()

последовательный запуск задач

gulp.task(
    'series_task',
    gulp.series('task1', 'task2')
);

src

src(globs[, options])

Возвращает поток объектов, которые можно обработать через pipe

  • globs - строка или список строк, путь для чтения

  • options - объект параметры

    • base - строка, базовая директория

    • buffer - булево, по умолчанию истина, буферизованное чтение

    • read - булево, по умолчанию истина, читать содержимое

gulp.src('./src/precss/*.css');

gulp.src(['client/*.js', '!client/b*.js', 'client/bad.js']);

gulp.src('./src/precss/**/*.css')
    .pipe(gulp.dest('./src/'));
// базовая папка будет client/js
// и все запишется в папку build/
gulp.src('client/js/**/*.js')
    .pipe(gulp.dest('build'));

// задаем базовую папку client
// и все запишется в папку build/js
gulp.src('client/js/**/*.js', { base: 'client' })
    .pipe(gulp.dest('build'));

pipe

Обрабатывает поток данных

gulp.src('./src/precss/**/*.css')
    .pipe(gulp.dest('./src/'));

task

task(name[, deps][, fn])

Создает задачу

По умолчнаию запускается задача default

  • name - название задачи

  • deps - список задач, зависимостей, которые должны быть выполнены перед этой задачей.

    Задачи выполнятся асинхронно.

// эта задача запускается при вызове gulp
gulp.task('default', function(){
    console.log('hello world');
});

// эта задача запускается при вызове gulp test
gulp.task('test', function(){
    console.log('hello world');
});

gulp.task('default', ['task1', 'task2'], function(){
    console.log('hello world');
});

gulp.task('build', ['task1', 'task2']);

tree

получение дерева задач

watch

watch(glob, [opts, ]tasks)
watch(glob[, opts, cb])

Следит за файлами и что-то делает при их изменении

  • glob - строка или массив, путь к папке слежения

  • opts - объект, параметры

  • tasks - список задач, которые необходимо выыполнить

  • cb - обработчик каждого изменения

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);

watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.watch('js/**/*.js', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

snippets

// копирование файлов
gulp.task('copy', () => {
    return gulp
        .src('src/**/*.*')
        .pipe(gulp.dest('dest'));
});
// копирование файлов, с процессингом
gulp.task('copy', () => {
    retur gulp
        .src('src/**/*.*')
        .on('data', (file) => {
            console.log(file);
        })
        .pipe(gulp.dest('dest'));
});
// копирование файлов, с процессингом, исключая папки
gulp.task('copy', () => {
    retur gulp
        .src(['src/**/*.*', '!node_modules/**'])
        // только указанные папки
        //.src('{src,css,script}/**/*.*')
        .pipe(gulp.dest((file) => {
            switch (file.extname) {
                case '.js':
                case '.json':
                    return 'script';
                case '.css':
                    retrun 'css';
                default:
                    return 'dest';
            }
        })));
});
// минификация и сборка в 1 файл js
const gulp = require('gulp');
const concat = require('gulp-concat');
const uglife = require(gulp-uglife);
const del = require('del');

paths = {
    scripts: {
        src: 'src/**/*.js',
        dst: 'assets/scripts',
    }
};

const clean = () => del(['assets']);

function scripts() {
    return gulp
        .src(paths.scripts.src, {sourcemaps: true})
        .pipe(uglife())
        .pipe(concat('main.min.js'))
        .pipe(gulp.dest(paths.scripts.dest));
}

function watch() {
    let watcher = gulp.watch(paths.scripts.src, gulp.series('default'));
    watcher.on('change', (event) => {
        console.log('${event} changed');
    });
}

gulp.task('default', gulp.series(clean, scripts, watch));