Definicje, front-end

Question

Witam mam pytanie, myślę nad front-endem i dowiedziałem się, by zabrać się za praktykę do firmy trzeba ogarniać m.in "npm", "gulp" ,"bower" i prosiłbym doświadczonych was zapytać o wyjaśnienie dokładnie do czego służą te rzeczy i jak je wykorzystuję się w pracy zawodowej oraz czy nie lepiej uczyć się innych rzeczy zamiast ich.(prosiłbym o długie wypowiedzi :P).

 

Dziękuje

Pozdrawiam

Answer 1

Hej, bawiłem się troszkę środowiskiem Node, będącym środowiskiem do tworzenia skalowanych aplikacji internetowych w JavaScript. Natomiast NPM (Node Packaged Module) jest to system paczek dla środowiska Node.
Zerknij na BLOGA jest na nim dokładniej wszystko opisane na temat npm jak i bower.

Co do tego czy warto się uczyć tych technologii... Hmm, na to pytanie możesz odpowiedź sobie sam:) Osobiście sprawdzam co jakiś czas różne, najróżniejsze rozwiązania, dopiero po przetestowaniu jestem w stanie ocenić czy to jest to co sprawia mi frajdę i czy dobrze się czuję w danym środowisku.
Pozdrawiam.

Comments

NPM (Node Packaged Module)

npm nie jest akronimem :> https://github.com/npm/npm-expansions

Poza tym npm jest już teraz de facto standardowym menedżerem pakietów dla całego środowiska JS, wypierając tym samym przestarzałego Bowera. 

Answer 2

NPM, Bower i Gulp (albo Grunt) są to pozycje obowiązkowe dla frontend developera. Mocno ułatwiają pracę, ogarnięcie ich to max 1 dzień czasu. Tłumaczę i objaśniam:

1. Instalujesz Node https://nodejs.org/en/ , NPM jest w pakiecie. Jest to system paczek dla środowiska Node. W folderze projektu wpisujesz npm init i na wszystko się zgadzasz, po czym tworzy się plik package.json. W tym pliku są zapisane wszystkie paczki które instalowałeś w projekcie. Inna osoba która pracuje na tym samym repo może doinstalować brakujące rzeczy poprzez komendę npm install.

2. Instalujesz Bowera komendą npm install bower -g, robi w zasadzie to samo co NPM (mniej folderów). Bower init tworzy plik bower.json i komenda bower install patrz wyżej.

Ja NPMem instaluję paczki które służą mi do pomocy przy budowie strony (np. Gulp), a bowerem paczki bez których strona nie ruszy (np. Bootstrap czy jQuery). Trzeba pamiętać, żeby dodać do gitignora foldery npma i bowera (node_modules i bower_components).

3. Instalujesz Gulpa komendą npm install gulp -g. W folderze projektu ponownie instalujesz Gulpa npm install --save-dev gulp (zostanie dopisany do package.json). Piszesz taski które są Ci potrzebne do pracy np. kompilator lessów na css itp.

 

Comments

A rozszerzysz to o Gulpie, jakie taski ocb z tym?

---

W kolejności:

1. W folderze projektu instalujesz gulpa 'npm install --save-dev'

2. Tworzysz plik gulpfile a w nim:

var gulp = require('gulp')

3. Szukasz odpowiedniego taska w googlach np. gulp less https://www.npmjs.com/package/gulp-less , następnie wpisujesz komendę npm install gulp-less --save-dev i w gulpfile dopisujesz:

var less = require('gulp-less');
var path = require('path');
 
gulp.task('less', function () {
  return gulp.src('./less/**/*.less')
    .pipe(less({
      paths: [ path.join(__dirname, 'less', 'includes') ]
    }))
    .pipe(gulp.dest('./public/css'));
});

4. Teraz jak chcesz skompilować pliki less na css wystarczy wpisać w konsoli 'gulp less'.

Mniej więcej tak to działa, chociaż teraz modny staje się webpack ;)

---

webpack?:D

Tylko instrukcje dales dla lessa, a w przypadku Sassa jak podpiac taska zeby zaczac na nim dzialac?

A drugie pytanie to czy pozneij ten kod skompilowany na css, wrzucajac na serwer gdzies to beda przegladarki go normalnie czytac?

---

Tylko instrukcje dales dla lessa, a w przypadku Sassa jak podpiac taska zeby zaczac na nim dzialac?

Tak samo jak dla LESSa, 

npm install gulp-sass --save-dev

plus

var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

A drugie pytanie to czy pozneij ten kod skompilowany na css, wrzucajac na serwer gdzies to beda przegladarki go normalnie czytac?

 Tak, to będzie normalny kod css, przykład:

LESS

/* media width */
@xs-width: 480px;
@sm-width: 768px;
@md-width: 992px;
@lg-width: 1200px;

.header_homepage {
    background: url(/img/background/bg_shutterstock.png) center center no-repeat;
    background-size: cover; text-align: center; 
    padding: 50px 0 100px 0; 
    @media (max-width: (@sm-width - 1)) {
        padding: 22px 0 50px;
    }
    &__top {
        display: block; text-align: right; padding-bottom: 50px;
        a { padding: 0 30px 0 0; margin: 0 5% 0 0; background: url(../img/icons_logos/Arrow_right.png) center right no-repeat; } 
    }
    &__logo { 
        margin: 55px 0 35px 0; 
        @media (max-width: (@sm-width - 1)) {
            margin: 35px 0 0 0;
        }
    }
    &__txt {
        color: white; padding: 35px 0 75px 0; width: 65%; margin: 0 auto;
        @media (max-width: (@sm-width - 1)) {
            width: 100%; padding: 35px 0 50px 0;
        }
    }
}

CSS po skompilowaniu:

/* media width */
.header_homepage {
  background: url(/img/background/bg_shutterstock.png) center center no-repeat;
  background-size: cover;
  text-align: center;
  padding: 50px 0 100px 0;
}
@media (max-width: 767px) {
  .header_homepage {
    padding: 22px 0 50px;
  }
}
.header_homepage__top {
  display: block;
  text-align: right;
  padding-bottom: 50px;
}
.header_homepage__top a {
  padding: 0 30px 0 0;
  margin: 0 5% 0 0;
  background: url(../img/icons_logos/Arrow_right.png) center right no-repeat;
}
.header_homepage__logo {
  margin: 55px 0 35px 0;
}
@media (max-width: 767px) {
  .header_homepage__logo {
    margin: 35px 0 0 0;
  }
}
.header_homepage__txt {
  color: white;
  padding: 35px 0 75px 0;
  width: 65%;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .header_homepage__txt {
    width: 100%;
    padding: 35px 0 50px 0;
  }
}