Skip to content
Logo IT Avans

Bower, NPM, Gulp, Sass, Jade – narzędzia dla Front-ent developerów

PHP

19 kwietnia 2016

Bower – menadżer paczek klienckich

Instalacja bowera (globalnie):
npm install -g bower

Wyszukiwanie:
bower search jquery
http://bower.io/search/

Instalacja:
bower install jquery -S
bower uninstall jquery
bower install jquery#1.9.1
bower install bootstrap-css angular
bower uninstall angular --save
bower install codejoust/session.js

Aktualizacja
bower update

Tworzenie pliku bower.json
bower init
bower --h

Lista zainstalowanych pakietów:
bower list
bower list --path

NPM – system paczek dla środowiska Node.

Tworzenie pliku zawierającego informację na temat paczek z jakich nasz projekt korzysta (packages.json).
npm init
Instalacja paczki
npm install

Strona do wyszukiwania paczek:
https://www.npmjs.com/

Jeżeli chcemy by nasza paczka która instalujemy znalazła się w package.json musimy dodać opcję:

npm install --save (niezbędne do uruchamiania środowiska/aplikacji)
npm install --save-dev (niezbędna jest do rozwijania i testowania aplikacji)
npm install --save-optional (opcjonalna)

Do tego mamy masę innych komend, jak uninstall czy update.

Gulp – narządzie do automatyzowania zadań i procesów

Instalacja globalna gulpa:
npm install -g gulp
npm install --global gulp-cli

Inicjacja projektu
npm init
npm install --save-dev gulp

Instalacja potrzebnych wtyczek:
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

Utworzenie pliku gulpfile.js
Poniżej znajduje się szereg przykładowych zadań realizowanych przez gulpa tj.
sprawdzenie poprawności plików js, kompilacja plików sass do css, łączenie plików js, nasłuchiwanie zmian w plikach oraz zdefiniowanie domyślnych zadań .

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});

// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint', 'scripts']);
gulp.watch('scss/*.scss', ['sass']);
});

// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

Uruchomienie zadań domyślnych bądź ściśle określonego zadania:

gulp
gulp sass

Sass – preprocesory css

Po zainstalowaniu Sass projekt kompilujemy korzystając z komendy:
sass input.scss output.css

bądź alternatywnie nasłuchujemy zmian w katalogu:
sass --watch app/sass:public/stylesheets

Przykładowa zawartość pliku scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

JADE – generator templatek, który pozwala na zachowanie znacznie wiekszą przejrzystość kodu html

po zainstalowaniu JADE w systemie
npm install jade --global

Mamy mozliwość kompilacji plików o rozszerzeniu .jade

Przykładowa zawartość pliku jade:

doctype html
  html
   head
    title my jade template
   body
     h1 Hello #{name}

jako wynik otrzymujemy:

<!DOCTYPE html>
  <html>
    <head>
      <title>my jade template</title>
    </head>
  <body>
    <h1>Hello Bob</h1>
  </body>
  </html>

Kompilacja pliku:
jade nazwa_pliku.jade
bądź
jade nazwa_katalogu_z_plikami

Tags: