Использование ES6 в Gulp
Относительно недавно я начала использовать в своих проектах новый стандарт JavaScript, ES6. В этой записи я расскажу, как настроить Gulp, чтобы внутри gulpfile тоже можно было писать на ES6.
Способ 1, с использованием Babel
Так как я занимаюсь в основном фронтендом, то для того, чтобы код, написанный на ES6, запускался в браузере, я использую Babel. Сборку проекта я делаю при помощи Gulp. Поэтому, можно обработать gulpfile при помощи Babel.
Для нового проекта установка будет выглядеть так:
- Инициализировать npm в папке проекта: npm init
- Установить для проекта Gulp: npm install —save-dev gulp и Babel: npm install —save-dev babel-core babel-preset-es2015
- В файле package.json (он появится после выполнения инициализации npm) добавить в раздел со скриптами команду для запуска Gulp:
«gulp» : «./node_modules/gulp/bin/gulp.js»
«presets» : [ «es2015» ]
После этого можно создать gulpfile с названием gulpfile.babel.js , и написать в нем необходимые такси, например:
‘use strict’ ;
import gulp from ‘gulp’ ;
import sass from ‘gulp-sass’ ;
const dirs = <
dest : 'build'
const sassPaths = <
src : ` $ < dirs . src >/app.scss`,
dest: `$
gulp . task ( ‘styles’ , ( ) = > <
return gulp . src ( paths . src )
. pipe ( sass . sync ( ) . on ( 'error' , plugins . sass . logError ) )
. pipe ( gulp . dest ( paths . dest ) ) ;
Babel позволяет использовать внутри gulpfile все новинки, появившиеся в ES6, в том числе модули.
Способ 2, с использованием новой версии Node.js
В Node.js версии 6, которая вышла всего несколько дней назад, 27 апреля, реализовано 93% возможностей ES6, что больше, чем в Babel. Это позволяет использовать новые возможности языка внутри gulpfile без дополнительных инструментов, что, как мне кажется, должно работать быстрее. К сожалению, использование новых версий возможно не всегда, так как могут возникать конфликты с уже используемыми в проекте пакетами. Например, node-sass, и соответственно gulp-sass, пока не работают на nodejs 6.
Заставить правильно работать Gulp+browserify+external
bluebird у меня загружается отдельно и имеет глобальную переменную Promise , соответственно я не хочу его упаковывать. Как заставить browserify правильно это всё отработать? Сейчас у меня получается нерабочий код
var Promise = _interopRequire(require("bluebird")); // .
т.е. просто ссылается на строку, а должно быть
в webpack я знаю это делается очень легко
var path = require('path'); module.exports = < //. externals: < 'bluebird': 'Promise' >, //. >; А как провернуть такой трюк в Gulp?
#2 — Gulp и SASS. Установка и работа
Препроцессор SASS позволяет прописывать CSS стили быстрее, используя переменные, циклы, условия, функции и многое другое. Но есть и проблема, код SASS необходимо конвертировать в CSS через консоль. Gulp позволяет оптимизировать процесс и выполняет все автоматически. В ходе урока вы научитесь это делать.
Видеоурок
Полезная ссылка:
Gulp позволяет оптимизировать множество рутинных задач и одна из таких задач — конвертация кода из SASS в CSS. Для автоматической конвертации данных необходимо построить функцию (задачу), прописать все настройки и далее выполнить команду в терминале, которая преобразует ваш SASS код в CSS.
Для работы с SASS предварительно необходимо установить плагин gulp-sass .
npm install --save-dev gulp-sassДалее необходимо прописать переменную и подключить в неё библиотеку.
var sass = require('gulp-sass')Теперь чтобы преобразовать данные из SASS в CSS необходимо прописать команду sass() внутри задачи:
function sassToCSS(done) < gulp.src('./scss/style.scss') .pipe(sass(< errorLogToConsole: true, outputStyle: 'compressed' >)) .on('error', console.error.bind(console)) .pipe(rename()) .pipe( gulp.dest('./css/') ); done(); >Куда нужно прописывать @import в gulp 4,чтобы установить библиотеку?
Вопрос такой: есть gulp 4, нужно установить библиотеку tippy.js, но когда прописываю в файле main.scss @import ‘tippy.js/dist/tippy.css’; в итоговом файле он просто прописывает данную строчку с кодом, а не сохраняет туда, установленную библиотеку.
- Вопрос задан более года назад
- 522 просмотра
Комментировать
Решения вопроса 1
Максим Самусевич @max_samusevich
Email and web development, UX/UI design
По поводу самой директивы @import в main.scss: сейчас рекомендуется использовать вместо неё @use , общий смысл остаётся тем же. Подробнее можете прочитать на официальном сайте.
Для подключения стилей библиотеки нужно прописать правильный путь до файла относительно того файла, в который подключаете, main.scss в вашем случае. Где у вас лежит библиотека, в node_modules? Относительный путь выглядит, например, так: ../../node_modules/tippy.js/dist/tippy.css : это значит выйти на один уровень папок выше два раза (две точки), затем зайти в несколько папок вглубь и выбрать нужный файл. Я думаю, вас запутал путь до CSS файла, указанный в описании пакета npm, там путь указывается для импорта с помощью ES modules в js файл, чтобы потом собирать с помощью бандлеров типа Webpack. Вы хотите подключить CSS файл в SCSS, так что попробуйте прописать путь, как я описал.
Для подключения JS части библиотеки потребуется import в ваш main.js или index.js с помощью ES modules, как описано на странице пакета библиотеки. В идеале потом, чтобы бандлер обработал Js: собрать в один файл, Babel, минификация и другие операции с JS кодом. Можно, конечно, и с помощью Gulp сконкатенировать все JS файлы без бандлеров, но нужно следить за порядком конкатенации, есть и другие нюансы, и это в целом неудобно. Я использую связку Gulp для всего кроме JS, а Webpack — для JS, соединяются они через webpack-stream.
Чтобы заработали ES modules, добавьте «type»: «module» в ваш package.json.