Pierwszy task HTML

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

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.)

Tu masz za rączkę :)

https://css-tricks.com/gulp-for-beginners/

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'))
});