Вам не нужен Gulp/Grunt/Webpack

Нам всего-лишь нужен npm. Я давно использую Gulp для управления моими задачами: конвертирование scss в css, конвертирование ES2015 js в ES5, минимизация js файлов, оптимизация изображений.

Начнём с SCSS

Нам понадобиться node-sass

npm install node-sass --save-dev

Добавляем этот пакет в package.json:

“build-css”: “node-sass assets/css/app.scss public/dist/app.css”,

Конвертирование ES2015 javascript

В первую очередь нам нужно установить babel-cli модуль и es215 babel пресет.

npm install babel-cli babel-preset-es2015 --save-dev

И опять добавляем зависимость в наш package.json:

“build-js”: “babel --presets babel-preset-es2015 assets/js/app.js -d public/js/”,

Минимизация js файлов

Для этой задачи нам потребуется uglifyjs модуль.

npm install uglify-js --save-dev

Естественно, добавляем его в package.json:

“minify-js”: “uglifyjs public/dist/js/app.js -o public/dist/js/app.min.js”,

Вы можете посмотреть все доступные опции по ссылке

Оптимизация изображений

Естественно нам потребуется очередной модуль: imagemin-cli (https://github.com/imagemin/imagemin-cli).

npm install imagemin-cli --save-dev

Добавляем его в зависимости:

“optimize”: “imagemin assets/images/* --out-dir=public/dist/images/”,

Наблюдатель (Watch tasks)

Нам нужно сохранить css и js файлы, после того как они изменились. Мы использовали 2 модуля для компиляции js и css, они принимают параметры "-watch".

“watch-css”: “node-sass assets/css/app.scss public/dist/app.css — watch”,

“watch-js”: “babel — presets babel-preset-es2015 assets/js/ -d public/dist/js/ — watch”,

Финальная оптимизация

Сейчас у нас есть 6 разных задач. Но мы можем их немного оптимизировать, например использовать переменные. Нам нужно переделать пакетный файл, мы добавим несколько переменный с путями:

“config”: {
 “src”: “assets”,
 “dist”: “public/dist”
 },

После чего мы можем переиспользовать их, например:

“build-css”: “node-sass $npm_package_config_src/css/app.scss $npm_package_config_dist/app.css”,

И если у нас изменятся пути к папкам "assets" или "dist", нам будет достаточно изменить переменные в конфиге.

Реорганизация скриптов

Сейчас наши скрипты выглядят не очень:

Лучший выбор- это создать папку "bin" и добавить по файлу на скрипт, естественно со скриптом внутри.

Одна задача для нескольких скриптами

Мы можем объединить несколько скриптов в один. Например две задачи по созданию scss и js файлов и по их отслеживанию: