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

Pierwszy task HTML

0 głosów
183 wizyt
pytanie zadane 13 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,640 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,640 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,940 p.)
Musisz
komentarz 13 czerwca 2017 przez kralcz88 Obywatel (1,640 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,940 p.)
komentarz 13 czerwca 2017 przez kralcz88 Obywatel (1,640 p.)
Dzięki :)
komentarz 13 czerwca 2017 przez zgrybus Pasjonat (24,940 p.)
mozesz wrzucic najlepsza :D
komentarz 13 czerwca 2017 przez kralcz88 Obywatel (1,640 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,940 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,640 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,940 p.)
no nic, po prostu daj je tam gdzie masz pliki sassa
komentarz 16 czerwca 2017 przez kralcz88 Obywatel (1,640 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,940 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ź 55 wizyt
pytanie zadane 5 stycznia w HTML i CSS przez pomaraqcz Początkujący (380 p.)
0 głosów
0 odpowiedzi 89 wizyt
pytanie zadane 16 sierpnia 2017 w HTML i CSS przez Patrick Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 77 wizyt
pytanie zadane 17 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,640 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

63,266 zapytań

109,521 odpowiedzi

228,794 komentarzy

43,515 pasjonatów

Przeglądających: 168
Pasjonatów: 4 Gości: 164

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...