Статьи / JavaScript

Установка gulp

Устанавливаем локально в проект:

npm install --save-dev gulp

Устанавливаем локально в проект gulp-uglify, gulp-concat, gulp-rename:

npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat
npm install --save-dev gulp-rename

Создаем или находим файл gulpfile.js в корне проекта:

Исходная папка js/src/...
Папка с минифицированными файлами js/dest

//подключаем модули
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');

//создаем задание сборки
gulp.task('js-lib', function(){

    return gulp.src([
        '/stati/javascript/ustanovka_gulp/js/src/lib/ajax.js',
        '/stati/javascript/ustanovka_gulp/js/src/lib/dateFormat.js'
    ])
        .pipe(concat('/stati/javascript/ustanovka_gulp/lib.min.js'))
        .pipe(gulp.dest('js/dest'))
        .pipe(rename('/stati/javascript/ustanovka_gulp/lib.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js/dest'));
});

//собираем цельный index.html в корне проекта из шаблонов (например для vue 2)

gulp.task('html', function() {

    return gulp.src([
        'js/src/tpl/start.tpl',
        'js/src/tpl/main.tpl',
        'js/src/tpl/login.tpl',
        'js/src/tpl/catalog',
        'js/src/tpl/end.tpl'
    ])
    .pipe(concat('/stati/javascript/ustanovka_gulp/index.html'))
    .pipe(gulp.dest('./'));
});

//создаем групповое задание
gulp.task('default', ['js-lib', 'html'], function(){});

//создаем watcher для слежения за файлами и автосборки
gulp.task('watch',function() {

    gulp.watch(
        [
           'js/src/tpl/start.tpl',
           'js/src/tpl/main.tpl',
           'js/src/tpl/login.tpl',
           'js/src/tpl/catalog',
           'js/src/tpl/end.tpl',
        ],
        ['html']);

    gulp.watch(
        [
            '/stati/javascript/ustanovka_gulp/js/src/lib/ajax.js',
            '/stati/javascript/ustanovka_gulp/js/src/lib/dateFormat.js'
        ],
        ['js-lib']);
});

При работе с проектом достаточно запустить задание watch и gulp будет следить за файлами и собирать их при каждом сохранении файла. В phpstorm это обычно потеря фокуса окна.

Запуск выборочного задания(например всех):

gulp default

Если панелька в phpstorm не появилась, то тыкаем в верху в выпадающее меню заданий и добавляем туда задание Gulp, обычно default и watch.

Вместо pipe лучше использовать pump, он покажет в какой строке ошибка:

gulp.task('js-shop', function (cb) {
  pump([
      gulp.src([
                  '/stati/javascript/ustanovka_gulp/js/good/goods.js',
                  '/stati/javascript/ustanovka_gulp/js/good/goods-edit.js',
                  '/stati/javascript/ustanovka_gulp/js/lang.js',
                  '/stati/javascript/ustanovka_gulp/js/init.js'
          ]),
      concat('/stati/javascript/ustanovka_gulp/shop.min.js'),
      gulp.dest('dest'),
      rename('/stati/javascript/ustanovka_gulp/shop.min.js'),
      uglify(),
      gulp.dest('dest')
    ],
    cb
  );
});

например покажет, что вы используете const вместо var.