• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pierwszy task HTML

VPS Starter Arubacloud
0 głosów
353 wizyt
pytanie zadane 13 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)
Witam!

W ramach zmierzenia się z typowym taskiem chciałbym wykonać projekt według projektu. Wytyczne zakładają użycie Bootstrapa w wersji sass oraz wtyczek kompilacji, minifikacji oraz dodawania autoprefixów.

Na początek czy dobrych wtyczek chce użyć?

autoprefixy - https://www.npmjs.com/package/grunt-autoprefixer

Nie wiem za bardzo co to jest ta minifikacja oraz nie jestem pewny jakiej wtyczki powinien użyć, żeby kompilować SCSS do CSS.

Czy może ktoś wesprzeć mnie?

2 odpowiedzi

–1 głos
odpowiedź 13 czerwca 2017 przez kralcz88 Obywatel (1,810 p.)
wybrane 13 czerwca 2017 przez kralcz88
 
Najlepsza
Dzięki za odpowiedź!

Do tej pory nigdy nie korzystałem z Gulpa, ale mam na komputerze środowisko node js i grunta.

Czy muszę dodatkowo instalować Gulpa czy od razu instaluje pluginy?
komentarz 13 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
Musisz
komentarz 13 czerwca 2017 przez kralcz88 Obywatel (1,810 p.)

Czyli w konsoli wystarczy wpisać

npm install --global gulp-cli

 

i to tyle? Potem Tworzę gulpfile.js i tyle?

komentarz 13 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
komentarz 13 czerwca 2017 przez kralcz88 Obywatel (1,810 p.)
Dzięki :)
komentarz 13 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
mozesz wrzucic najlepsza :D
komentarz 13 czerwca 2017 przez kralcz88 Obywatel (1,810 p.)
Powiedzcie proszę o co chodzi z zastosowaniem w projekcie Bootstrap Sass version.

1. Jak z tego z tego skorzystać? Wystarczy, że pobiorę pliki i dołączę do projektu?

2. Jak jest różnica pomiędzy zwykłym Bootstrapem, Bootstrap w wersji Sass?

3. Gdy mam w projekcie Gulpa to czy trzeba jakoś dodatkowo dodać Bootstrap Sass do niego?
komentarz 14 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)

przecież gulp Ci to zmieli do jednego pliku css..
Masz wszystko dokładnie napisane w tym tasku, czytałeś?

return gulp.src('./sass/**/*.scss')

Z daleka widać przecież co robi ta linijka.

komentarz 14 czerwca 2017 przez kralcz88 Obywatel (1,810 p.)
Gulp działa OK, komplikuje do Sass do CSS bez problemów.

Ja pytam o wykorzystanie w frojekcie Bootstrap Sass version. Nidy z tego nie korzystałem i nie wiem jak ugryźć temat. Do tej pory korzystałem z Bootstrapa podpisanego z CDN. A Bootstrap Sass versionwymaga ściągnięcia plików i pytanie co mam z nimi dalej zrobić
komentarz 14 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
no nic, po prostu daj je tam gdzie masz pliki sassa
komentarz 16 czerwca 2017 przez kralcz88 Obywatel (1,810 p.)

Czy mółgby ktoś rzucić okiem na konfigurację gulpfile poniżej? Coś chyba jest nie tak z minify-css i autorpofixami, bo watch nie śledzi zmian w tym wypadku. 
 

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');


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

gulp.task('watch', function(){
	gulp.watch('app/scss/**/*.scss', ['sass', 'minify-css', 'default']);
});

gulp.task('minify-css', function(){
	return gulp.src('app/css/*.css')
	.pipe(cleanCSS({compatibility: 'ie8'}))
	.pipe(gulp.dest('app/css'))
});

gulp.task('default', function(){
	gulp.src('app/css/*.css')
	.pipe(autoprefixer())
	.pipe(gulp.dest('app/css'))
});

 

0 głosów
odpowiedź 13 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
Potrzebujesz Gulpa / Grunta  - polecam Gulpa :)

Gulp - https://www.npmjs.com/package/gulp

Sass -> Css - https://www.npmjs.com/package/gulp-sass

Minify - https://github.com/scniro/gulp-clean-css  // w sass -> css ( wystarczy dodać parametr compressed i wtedy nie potrzebujesz tego ).

Autoprefixer - https://www.npmjs.com/package/gulp-autoprefixer

Podobne pytania

–1 głos
1 odpowiedź 252 wizyt
pytanie zadane 5 stycznia 2019 w HTML i CSS przez pomaraqcz Początkujący (380 p.)
0 głosów
0 odpowiedzi 167 wizyt
pytanie zadane 16 sierpnia 2017 w HTML i CSS przez Patrick Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 204 wizyt
pytanie zadane 17 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...