Автор оригинала: Jose Zamudio.
Как настроить задачи Gulp
Прежде всего, что такое Gulp.js ? Простой ответ:
GULP.JS – это задача/сборщик, который использует трубы для потоковых данных, которые необходимо обрабатывать.
Итак, как Gulp.js может помочь во время процесса развития?
Есть много языков программирования, которые имеют Расширения Это облегчает или более элегантно развивать большие проекты. Это Расширения Может быть более мощным во время разработки, добавив функции, которые не были доступны на исходном языке.
Некоторые примеры:
- CoffeeScript => JavaScript
CoffeeScript:
thisIsAFunction = (a, b, c) -> # Do something
JavaScript:
function thisIsAFunction(a, b, c) {
// Do something
}
- Джейд => HTML
Джейд:
form input#id-name.class-name(type='text', placeholder='Something')
HTML:
- Sass/rESE => CSS
Sass:
.some-class {
background-color: $variable-name;
.some-inner-class {
color: $variable-name;
}
}
CSS:
.some-class {
background-color: #444;
}
.some-class > .some-inner-class {
color: #444;
}
Это Расширения Сами по себе ничего не делайте … браузер не понимает, что CoffeeScript, Jade или Sass, они должны быть скомпилированы на свои оригинальные языки для браузера, чтобы узнать, что вы пытаетесь программировать.
Вот где приходит Gulp.js. Есть много плагинов, которые позволяют вам компилировать все это Расширения на их первоначальный язык и заставить его работать с простой строкой в терминале.
Настройка GULP.JS В первый раз может быть запутано, так что в этом руководстве я собираюсь вести вас в управление своими первыми задачами для компиляции CoffeeScript , Джейд и Sass в JavaScript , HTML и CSS Отказ
Требования
- Node.js ( Как установить )
- Новейшая версия Узел Узел Manager (NPM)
- Gulp.js установлен по всему миру
// run to make sure you have the newest version... npm install -g npm
npm install -g gulp
Для этого учебника мы собираемся создать простое приложение TODO с приложением Angular.js (без базы данных, он будет хранить только элементы для текущего сеанса и будет удалять их при обновлении …)
Это будет структура файла для проекта:
- app/ ---- js/ -------- main.coffee // will compile to .js ---- css/ -------- main.scss // will compile to .css ---- index.jade // will compile to .html - gulpfile.js - package.json
После составления наших файлов Gulp создаст публично/ Папка, которая будет удерживать вновь скомпилированные файлы.
Давайте начнем!
Настройка Angular.js в вашем нефрите/HTML
Во-первых, давайте создадим базовый проект HTML в нефрите
Приложение/index.jade.
doctype html
html
head
title 'ToDo App'
body
input.input-form(type='text', placeholder='Add things to do')
Это создаст базовый HTML-файл с заголовком “Todo app” с входной формой в качестве содержания сайта.
Давайте добавим Angular.js к нему, используя CDN Angular.js и ссылку на нашу таблицу stylesheet и наши файлы JavaScript.
Приложение/index.jade.
doctype html
html(ng-app='TodoApp')
head
title 'ToDo App'
link(rel='stylesheet', href='css/main.css')
body(ng-controller='TodoAppController')
input.input-form(type='text', placeholder='Add things to do')
button.btn(type='submit') Submit
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js')
script(src='js/main.js')
Приложение/JS/Main.Coffee
angular.module('TodoApp', [])
.controller 'TodoAppController, [ $scope, ($scope) ->
# logic goes here
]
Приложение/CSS/Main.scss
$black: #444;
$gray: #eee;
$danger-red: #d54444;
body {
background-color: $gray;
color: $black
}
Это основа вашего приложения с Angular.js, готовых к тому, чтобы создать приложение, используя нефть, CoffeeScript и Sass.
Логика для приложения
Я собираюсь сделать это приложение действительно простым, поскольку идея для этого учебника не является не тем, как создать приложение, но как скомпилировать и запускать задачи, используя Gulp.js.
Приложение/index.jade.
doctype html
html(ng-app='TodoApp')
head
title 'ToDo App'
link(rel='stylesheet', href='css/main.css')
body(ng-controller='TodoAppController')
input.input-form(type='text', placeholder='Add things to do')
button.btn(type='submit') Submit
ul
li(ng-repeat='task in tasksToDo track by $index') {{task}}
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js')
script(src='js/main.js')
Приложение/JS/Main.Coffee
angular.module('TodoApp', [])
.controller 'TodoAppController, [ $scope, ($scope) ->
$scope.tasksToDo = []
$scope.error = false
$scope.addTask = (task) ->
if not task
$scope.error = true
else
$scope.tasksToDo.push(task)
$scope.newTask = ''
$scope.error = false
]
Приложение/CSS/Main.scss
$black: #444;
$gray: #eee;
$white: #fff;
$danger-red: #d54444;
body {
background-color: $white;
color: $black;
text-align: center;
}
input[type='text'] {
background-color: $gray;
padding: 15px;
font-size: 14px;
border-radius: 4px 0 0 4px;
box-shadow: none;
border: none;
}
button {
padding: 15px;
margin-left: -4px;
font-size: 14px;
border-radius: 0 4px 4px 0;
box-shadow: none;
border: none;
background-color: $black;
color: $white;
}
.error-message {
margin: 10px;
color: $danger-red;
}
ul {
list-style: none;
padding: 0;
li {
margin: 5px;
padding: 5px 20px;
border: 1px solid $danger-red;
}
}
Мы закончили с приложением!
Но подожди … браузер ничего не понимает из этого! Мы должны построить наш Gulpfile.js, чтобы скомпилировать это на языке, наш браузер может понять.
Настройка Gulpfile.js.
Сначала убедитесь, что вы запустите NPM установить -G глоток
Сначала мы должны настроить Package.json файл…
Package.json.
{
"name": "gulp-tutorial",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"author": ""
}
Теперь на терминале запустите следующую команду:
npm install --save-dev gulp gulp-jade gulp-sass gulp-coffee gulp-load-plugins gulp-util
Это установит следующие пакеты в ваш Package.json в качестве зависимости DEV
- Гульп : Главная задача бегун
- Гульп-Джейд : Это будет скомпилировать свой нефритовый HTML.
- Гульп-Сас : Это скомпилирует ваш SASS в CSS.
- Гульп-кофе : Это составит ваш CoffeeScript в JavaScript.
- Гульп-нагрузки-плагины : Это позволит нам использовать плагины, не требуя их всех.
- Gulp-Util : Это позволит нам ошибкам Console.log в гораздо приятнее/довольно.
Ваш Package.json должен выглядеть так сейчас:
Package.json.
{
"name": "gulp-tutorial",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"author": "",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-coffee": "^2.3.1",
"gulp-jade": "^1.0.1",
"gulp-load-plugins": "^1.0.0-rc.1",
"gulp-sass": "^2.0.3",
"gulp-util": "^3.0.6"
}
}
Теперь давайте воспользуемся нашим Gulpfile.js.
Чтобы создать задачу, которую мы используем следующий синтаксис:
gulp.task('NAME_OF_TASK', function() {
gulp.src(['PATH_TO_SOURCE_FILE'])
.pipe(**INSERT_TASK**)
.pipe(gulp.dest('PATH_TO_DESTINATION');
});
Gulpfile.js.
// We have to require our dependencies
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
// create a TASK to compile Jade to HTML using gulp-jade
gulp.task('html', function() {
gulp.src(['./app/**/*.jade'])
.pipe($.jade({pretty: true, doctype: 'html'}))
.on('error', $.util.log)
.pipe(gulp.dest('./public/'));
});
// create a TASK to compile CoffeeScript to JavaScript using gulp-coffee
gulp.task('js', function() {
gulp.src(['./app/**/*.coffee'])
.pipe($.coffee({bare: true}))
.on('error', $.util.log)
.pipe(gulp.dest('./public/'));
});
// create a TASK to compile Sass into CSS using gulp-sass
gulp.task('css', function() {
gulp.src(['./app/**/*.scss'])
.pipe($.sass({style: 'expanded'}))
.pipe(gulp.dest('./public/'));
});
// create a TASK to WATCH for changes in your files
// this will "watch" for any changes in your files and rerun gulp if necessary
gulp.task('watch', function() {
gulp.watch(['./app/**/*.jade'], ['html']);
gulp.watch(['./app/**/*.coffee'], ['js']);
gulp.watch(['./app/**/*.scss'], ['css']);
});
// finally, create a TASK that will run all commands when typing "gulp"
// in Terminal
gulp.task('default', ['html', 'js', 'css', 'watch'], function() {});
Ваш терминал должен иметь что-то похожее на следующие журналы:
[14:09:59] Using gulpfile ~/Developer/codementor/tutorials/Gulp/gulpfile.js [14:09:59] Starting 'html'... [14:09:59] Finished 'html' after 176 ms [14:09:59] Starting 'js'... [14:10:00] Finished 'js' after 109 ms [14:10:00] Starting 'css'... [14:10:00] Finished 'css' after 83 ms [14:10:00] Starting 'watch'... [14:10:00] Finished 'watch' after 11 ms [14:10:00] Starting 'default'... [14:10:00] Finished 'default' after 2.54 μs
Что происходит с каждой задачей, это то, что при запуске Гульп В терминале Гульп пойдет на Gulp.src указано в каждой задаче и составление определенного файла. Если есть ошибка, она будет зарегистрирована в терминале, позволяя вам знать проблему. Если нет ошибки, Gulp создаст папку под названием публично/ и поместите компиляцию .html , .js и .css в этом.
Смотреть Задача будет проверять, внося ли вы изменения в любой из ваших файлов, и если вы сделаете, это сделает их снова скомпилировать и обновить .html , .js или .css Отказ
Вы также можете захотеть запустить только индивидуальную задачу, вы можете сделать это, запустив следующую команду:
> gulp NAME_OF_TASK
я
> gulp html
Теперь, если вы посмотрите на свой файловый каталог, вы увидите вновь созданную папку, называемую публично/ Со всеми вашими скомпилированными файлами в нем теперь ваш браузер может прочитать эти файлы!
Дополнительные комментарии
Гульп очень мощный, и он может быть использован, чтобы сделать гораздо больше, например:
- Объединить все ваши файлы в один файл
- Введите все файлы JavaScript и CSS автоматически в свой HTML
- Livereload ваш браузер при внесении любых изменений в ваши файлы.
- Запустить браузерс
- Создание файлов с такой командой, как
Генерация глотания: Controller File_Name - Многое другое!
Я загрузил файлы в Github, и вы можете проверить это здесь