- Сообщений: 547
- Спасибо получено: 666
coffeescript и mv (с помощью gulp)
8 года 6 мес. назад - 8 года 6 мес. назад #100354
от Amphilohiy
Я верю, что иногда компьютер сбоит, и он выдает неожиданные результаты, но остальные 100% случаев это чья-то криворукость.
Amphilohiy создал тему: coffeescript и mv (с помощью gulp)
Как вы уже наверное знаете я не фанат js, и предпочитаю его с большой дозой сахара. В данном случае синтаксическим сахаром нам будет coffeescript. Почему я взял кофе? Поглядите главную страницу
coffeescript
, там сами решите надо ли оно вам. Как работает кофеек? Берется код на кофе, транспайлиться(слова то страшные) и в итоге мы получаем js файл, который потом и используем. Теперь же вопрос: как же мы будем, это, как его, транспайлить? Начнем с Ноды.
Node & Gulp
Я предпологаю что вы под виндозой, так что я провел все шаги в 7рке. Для начала скачаем эту самую ноду отсюда . Если не знаете какую кнопку жать - жмите левую. Дальше устанавливаем по установочнику, тут объяснять надеюсь не надо.
Теперь надо открыть консоль с окружением ноды: Графическая подсказка .
Дальше небольшой мой прокол, но разрулим так. В командной строке напишите
Если в результате вы увидите что-то вроде
то все хорошо, ИНАЧЕ попробуйте
Так вы поставите гульп глобально. Это нужно просто для удобства, иначе вам придется вызывать гульп из пакетов.
Настройка Gulp
Сначала создайте папку в которой вы положете ваш gulp и скрипты по настройке. Он может лежать где вашей душе угодно. А внутри консоли обязательно перейдите в эту папку.
Теперь внутри создаем фаил package.json и пишем в него следующее:
В консоле (вы же находитесь в той же папке, да?) пишем
У вас должна была появиться папочка node_modules (и скорее всего package-lock.json). Теперь создадим gulpfile.js в который на сейчас запишем следующее:
сохраняем и пытаемся запустить гулп командой в консоли:
Если на экран вывелись надписи на подобии:
а консоль от вас чего-то ждет, то это успех. Если что убить галп можно с помощью ctrl-c.
И да, пока убейте ее. Сейчас проверим.
Проверка
создайте папку src а в нем фаил test.coffee. Перезапустите галп, и впишите в фаил следующее:
Сохраните фаил и ищите папку dest. Там должен быть фаил test.js примерно следующего содержания:
Код не лучшей красоты, но значит работает!
Подробнее о gulpfile.js
Посмотрим на некоторые команды, чтобы понять как оно работает. Но require я рассматривать не стану.
Так мы создаем таску coffee. тасок может быть много и запускать их можно по разному.Чтобы запустить эту конкретную таску надо выполнить команду
Ближе к пайплайну:
Знакомтесь - gulp-watch. Мы создаем "триггер изменений", который заставит пайплайн работать при изменении файла. В него достаточно передать путь до отслеживаемых файлов. Данная конструкция смотрит в подпапке src и рекурсивно обвешивает триггеры на файлы с форматом coffee.
Достраиваем пайплайн. Gulp-plumber не дает задаче упасть, иначе пришлось бы перезапускать gulp при любой синтаксической ошибке. Дальше сама перегонка в кофе, и наконец выплевываем сам фаил в подпапку dest.
И последний момент:
Мы создаем задачу из нескольких задач и называем ее default. По умолчанию gulp ищет задачу с именем 'default', но вы можете запустить любюу переда имя задачи галпу. Ну и соответственно вы можете запустить задачу, которая исполняет несколько задач.
Гулп пользуется готовыми пакетами из которых мы и строим пайплайн. Их еще много разных, ознакомиться можно на буржуйском сайте пакетного менеджера npm .
И об этом. Устанавливать пакеты можно примерно следующей командой:
Таким образом информация о пакете сохранится в package.json. Если собираетесь сохранять ваш гульпфаил в гите, но не тащите за собой node_modules. простая команда npm install подтянет все зависимости из package.json и package-lock.json. Но подробно npm рассматривать я не буду.
На этом все. Надеюсь я дал вам достаточно информации по gulp и его волшебным свойствам. Если вы все сделали правильно, то уже можете писать на кофе и пользоваться выхлопом в виде js.
Node & Gulp
Я предпологаю что вы под виндозой, так что я провел все шаги в 7рке. Для начала скачаем эту самую ноду отсюда . Если не знаете какую кнопку жать - жмите левую. Дальше устанавливаем по установочнику, тут объяснять надеюсь не надо.
Теперь надо открыть консоль с окружением ноды: Графическая подсказка .
Дальше небольшой мой прокол, но разрулим так. В командной строке напишите
Code:
gulp
Code:
Local gulp not found in ###
Try running: npm install gulp
Code:
npm install -g gulp
Настройка Gulp
Сначала создайте папку в которой вы положете ваш gulp и скрипты по настройке. Он может лежать где вашей душе угодно. А внутри консоли обязательно перейдите в эту папку.
Теперь внутри создаем фаил package.json и пишем в него следующее:
Code:
{
"dependencies": {
"gulp-coffee": "^2.3.4",
"gulp-plumber": "^1.1.0",
"gulp-watch": "^4.3.11",
"gulp": "^3.9.1"
}
}
Code:
npm install
Code:
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']);
Code:
gulp
Code:
Using gulpfile ###
Starting 'coffee'
И да, пока убейте ее. Сейчас проверим.
Проверка
создайте папку src а в нем фаил test.coffee. Перезапустите галп, и впишите в фаил следующее:
ВНИМАНИЕ: Спойлер!
Code:
###
Сгенерено галпом из кофескрипта гениальным Амфилохием
###
class Unit
constructor: (@hp, @def, @atk)->
@dead = false
recieveDamage: (damage)->
@hp -= (damage - @def)
if @hp < 0
@dead = true
attack: (target)->
target.recieveDamage(@atk)
class Rouge extends Unit
attack: (target)->
target.recieveDamage(@atk)
# Бьет пока прет
while @feelLucky()
target.recieveDamage(@atk)
feelLucky: ->
Math.random() < 0.50
warrior = new Unit(100, 5, 15)
rouge = new Rouge(70, 2, 13)
while !warrior.dead && !rouge.dead
warrior.attack(rouge)
rouge.attack(warrior)
if warrior.dead && rouge.dead
console.log('Ничья!')
else if warrior.dead
console.log('Разбойнику прет!')
else
console.log('Войну прет!')
Сохраните фаил и ищите папку dest. Там должен быть фаил test.js примерно следующего содержания:
ВНИМАНИЕ: Спойлер!
Code:
/*
Сгенерено галпом из кофескрипта гениальным Амфилохием
*/
(function() {
var Rouge, Unit, rouge, warrior,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
Unit = (function() {
function Unit(hp, def, atk) {
this.hp = hp;
this.def = def;
this.atk = atk;
this.dead = false;
}
Unit.prototype.recieveDamage = function(damage) {
this.hp -= damage - this.def;
if (this.hp < 0) {
return this.dead = true;
}
};
Unit.prototype.attack = function(target) {
return target.recieveDamage(this.atk);
};
return Unit;
})();
Rouge = (function(superClass) {
extend(Rouge, superClass);
function Rouge() {
return Rouge.__super__.constructor.apply(this, arguments);
}
Rouge.prototype.attack = function(target) {
var results;
target.recieveDamage(this.atk);
results = [];
while (this.feelLucky()) {
results.push(target.recieveDamage(this.atk));
}
return results;
};
Rouge.prototype.feelLucky = function() {
return Math.random() < 0.50;
};
return Rouge;
})(Unit);
warrior = new Unit(100, 5, 15);
rouge = new Rouge(70, 2, 13);
while (!warrior.dead && !rouge.dead) {
warrior.attack(rouge);
rouge.attack(warrior);
}
if (warrior.dead && rouge.dead) {
console.log('Ничья!');
} else if (warrior.dead) {
console.log('Разбойнику прет!');
} else {
console.log('Войну прет!');
}
}).call(this);
Код не лучшей красоты, но значит работает!
Подробнее о gulpfile.js
Посмотрим на некоторые команды, чтобы понять как оно работает. Но require я рассматривать не стану.
Code:
gulp.task('coffee', function(){
Code:
gulp coffee
Code:
return watch('./src/**/*.coffee')
Code:
.pipe(plumber())
.pipe(coffee())
.pipe(gulp.dest('./dest'));
И последний момент:
Code:
gulp.task('default', ['coffee']);
Гулп пользуется готовыми пакетами из которых мы и строим пайплайн. Их еще много разных, ознакомиться можно на буржуйском сайте пакетного менеджера npm .
И об этом. Устанавливать пакеты можно примерно следующей командой:
Code:
npm install --save <ваш пакет>
На этом все. Надеюсь я дал вам достаточно информации по gulp и его волшебным свойствам. Если вы все сделали правильно, то уже можете писать на кофе и пользоваться выхлопом в виде js.
Я верю, что иногда компьютер сбоит, и он выдает неожиданные результаты, но остальные 100% случаев это чья-то криворукость.
Последнее редактирование: 8 года 6 мес. назад пользователем Amphilohiy.
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.
Время создания страницы: 0.090 секунд
