Войти на сайт
×
ТЕМА: coffeescript и mv (с помощью gulp)
coffeescript и mv (с помощью gulp) 7 года 2 нед. назад #100354
     |
Как вы уже наверное знаете я не фанат js, и предпочитаю его с большой дозой сахара. В данном случае синтаксическим сахаром нам будет coffeescript. Почему я взял кофе? Поглядите главную страницу coffeescript, там сами решите надо ли оно вам. Как работает кофеек? Берется код на кофе, транспайлиться(слова то страшные) и в итоге мы получаем js файл, который потом и используем. Теперь же вопрос: как же мы будем, это, как его, транспайлить? Начнем с Ноды.
Node & Gulp Я предпологаю что вы под виндозой, так что я провел все шаги в 7рке. Для начала скачаем эту самую ноду отсюда. Если не знаете какую кнопку жать - жмите левую. Дальше устанавливаем по установочнику, тут объяснять надеюсь не надо. Теперь надо открыть консоль с окружением ноды: Графическая подсказка. Дальше небольшой мой прокол, но разрулим так. В командной строке напишите gulpLocal gulp not found in ###
Try running: npm install gulpnpm 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 installvar 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']);gulpUsing gulpfile ###
Starting 'coffee'И да, пока убейте ее. Сейчас проверим. Проверка создайте папку src а в нем фаил test.coffee. Перезапустите галп, и впишите в фаил следующее: ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ][ Нажмите, чтобы скрыть ] ###
Сгенерено галпом из кофескрипта гениальным Амфилохием
###
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 примерно следующего содержания: ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ][ Нажмите, чтобы скрыть ] /*
Сгенерено галпом из кофескрипта гениальным Амфилохием
*/
(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 я рассматривать не стану. gulp.task('coffee', function(){gulp coffeereturn watch('./src/**/*.coffee') .pipe(plumber())
.pipe(coffee())
.pipe(gulp.dest('./dest'));И последний момент: gulp.task('default', ['coffee']);Гулп пользуется готовыми пакетами из которых мы и строим пайплайн. Их еще много разных, ознакомиться можно на буржуйском сайте пакетного менеджера npm. И об этом. Устанавливать пакеты можно примерно следующей командой: npm install --save <ваш пакет>На этом все. Надеюсь я дал вам достаточно информации по gulp и его волшебным свойствам. Если вы все сделали правильно, то уже можете писать на кофе и пользоваться выхлопом в виде js. |
|
Я верю, что иногда компьютер сбоит, и он выдает неожиданные результаты, но остальные 100% случаев это чья-то криворукость.
Последнее редактирование: 7 года 2 нед. назад от Amphilohiy.
Администратор запретил публиковать записи гостям.
|
Время создания страницы: 0.716 секунд