Статьи / 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.