Войти на сайт

Авторизация, ждите ...
×

ТЕМА: coffeescript и mv (с помощью gulp)

coffeescript и mv (с помощью gulp) 4 года 9 мес. назад #100354

  • Amphilohiy
  • Amphilohiy аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 547
  • Спасибо получено: 665
  • УчительПрограммист Ruby2 место ГотвПобедитель Сбитой кодировкиОратор
Как вы уже наверное знаете я не фанат js, и предпочитаю его с большой дозой сахара. В данном случае синтаксическим сахаром нам будет coffeescript. Почему я взял кофе? Поглядите главную страницу coffeescript, там сами решите надо ли оно вам. Как работает кофеек? Берется код на кофе, транспайлиться(слова то страшные) и в итоге мы получаем js файл, который потом и используем. Теперь же вопрос: как же мы будем, это, как его, транспайлить? Начнем с Ноды.
Node & Gulp
Я предпологаю что вы под виндозой, так что я провел все шаги в 7рке. Для начала скачаем эту самую ноду отсюда. Если не знаете какую кнопку жать - жмите левую. Дальше устанавливаем по установочнику, тут объяснять надеюсь не надо.
Теперь надо открыть консоль с окружением ноды: Графическая подсказка.
Дальше небольшой мой прокол, но разрулим так. В командной строке напишите
gulp
Если в результате вы увидите что-то вроде
Local gulp not found in ###
Try running: npm install gulp
то все хорошо, ИНАЧЕ попробуйте
npm install -g gulp
Так вы поставите гульп глобально. Это нужно просто для удобства, иначе вам придется вызывать гульп из пакетов.
Настройка Gulp
Сначала создайте папку в которой вы положете ваш gulp и скрипты по настройке. Он может лежать где вашей душе угодно. А внутри консоли обязательно перейдите в эту папку.
Теперь внутри создаем фаил package.json и пишем в него следующее:
{
  "dependencies": {
    "gulp-coffee": "^2.3.4",
    "gulp-plumber": "^1.1.0",
    "gulp-watch": "^4.3.11",
    "gulp": "^3.9.1"
  }
}
В консоле (вы же находитесь в той же папке, да?) пишем
npm install
У вас должна была появиться папочка node_modules (и скорее всего package-lock.json). Теперь создадим gulpfile.js в который на сейчас запишем следующее:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var coffee = require('gulp-coffee');
var watch = require('gulp-watch');
 
gulp.task('coffee', function(){
	return watch('./src/**/*.coffee')
		.pipe(plumber())
		.pipe(coffee())
		.pipe(gulp.dest('./dest'));
})
 
gulp.task('default', ['coffee']);
сохраняем и пытаемся запустить гулп командой в консоли:
gulp
Если на экран вывелись надписи на подобии:
Using gulpfile ###
Starting 'coffee'
а консоль от вас чего-то ждет, то это успех. Если что убить галп можно с помощью ctrl-c.
И да, пока убейте ее. Сейчас проверим.
Проверка
создайте папку src а в нем фаил test.coffee. Перезапустите галп, и впишите в фаил следующее:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

Сохраните фаил и ищите папку dest. Там должен быть фаил test.js примерно следующего содержания:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

Код не лучшей красоты, но значит работает!
Подробнее о gulpfile.js
Посмотрим на некоторые команды, чтобы понять как оно работает. Но require я рассматривать не стану.
gulp.task('coffee', function(){
Так мы создаем таску coffee. тасок может быть много и запускать их можно по разному.Чтобы запустить эту конкретную таску надо выполнить команду
gulp coffee
Ближе к пайплайну:
return watch('./src/**/*.coffee')
Знакомтесь - gulp-watch. Мы создаем "триггер изменений", который заставит пайплайн работать при изменении файла. В него достаточно передать путь до отслеживаемых файлов. Данная конструкция смотрит в подпапке src и рекурсивно обвешивает триггеры на файлы с форматом coffee.
		.pipe(plumber())
		.pipe(coffee())
		.pipe(gulp.dest('./dest'));
Достраиваем пайплайн. Gulp-plumber не дает задаче упасть, иначе пришлось бы перезапускать gulp при любой синтаксической ошибке. Дальше сама перегонка в кофе, и наконец выплевываем сам фаил в подпапку dest.
И последний момент:
gulp.task('default', ['coffee']);
Мы создаем задачу из нескольких задач и называем ее default. По умолчанию gulp ищет задачу с именем 'default', но вы можете запустить любюу переда имя задачи галпу. Ну и соответственно вы можете запустить задачу, которая исполняет несколько задач.
Гулп пользуется готовыми пакетами из которых мы и строим пайплайн. Их еще много разных, ознакомиться можно на буржуйском сайте пакетного менеджера npm.
И об этом. Устанавливать пакеты можно примерно следующей командой:
npm install --save <ваш пакет>
Таким образом информация о пакете сохранится в package.json. Если собираетесь сохранять ваш гульпфаил в гите, но не тащите за собой node_modules. простая команда npm install подтянет все зависимости из package.json и package-lock.json. Но подробно npm рассматривать я не буду.
На этом все. Надеюсь я дал вам достаточно информации по gulp и его волшебным свойствам. Если вы все сделали правильно, то уже можете писать на кофе и пользоваться выхлопом в виде js.
Я верю, что иногда компьютер сбоит, и он выдает неожиданные результаты, но остальные 100% случаев это чья-то криворукость.
Последнее редактирование: 4 года 9 мес. назад от Amphilohiy.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, AnnTenna, DK, yuryol, Rude
Время создания страницы: 0.702 секунд