Работа с Gulp3
Работу с Gulp3 я изучал по уроку https://webdesign-master.ru/blog/tools/2016-03-09-gulp-beginners.html. Ссылка на Git: https://github.com/agragregra/gulp-lesson.
Основные команды
- Установка gulp глобальная:
npm i gulp -g
- Инициализация проекта:
npm init
- Установка проекта с ключом --save-dev. Если мы установим в проект Gulp с ключом --save-dev, то пакет и используемая версия автоматически добавится в наш package.json. Такой учет позволит быстро разворачивать новый проект с использованием уже имеющегося package.json и устанавливать необходимые модули с зависимостями, которые прописаны в package.json в новых проектах.
npm i gulp --save-dev
- Устанавливаем browser-sync:
npm i browser-sync --save-dev
- Устанавливаем bower:
npm i brower --save-dev
- Устанавливаем gulp-concat и gulp-uglifyjs:
npm i gulp-concat gulp-uglifyjs --save-dev
- Устанавливаем gulp-cssnano и gulp-rename:
npm i gulp-cssnano gulp-rename --save-dev
- Устанавливаем del:
npm i del --save-dev
- Устанавливаем gulp-imagemin и imagemin-pngquant:
npm i gulp-imagemin imagemin-pngquant --save-dev
- Устанавливаем gulp-cache:
npm i gulp-cache --save-dev
- Устанавливаем gulp-autoprefixer:
npm i gulp-autoprefixer --save-dev
- В команде sass нужно добавить следующее:
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)вот таким образом это сделать. Чтобы CSS был красивый.
Пример классной сборки на Gulp
Ссылка на файл: https://drive.google.com/file/d/1rKMVShryfe_EzV9dDK9KnxSHrNudAuV4/view. Оригинальный файл находится в приложении.
Полезные ссылки
Приложения:
