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