Wpis ten poświęcę bardzo ważnej kwestii, a mianowicie dobremu przygotowaniu do tworzenia projektu.   Coś na co nie trafiłem na początku mojej przygody  z programowaniem, i co myślę dla takiego samouka jak ja bardzo by się przydało.

 

Ważna uwaga : proszę nie traktować jako kursu ( wiem że czasami może być mało czytelny) , wpis ten raczej służy jako odnośnik dla mnie.  A  może stać się inspiracją dla innych ” np ja żałuje że wcześniej nie natknąłem się na taki wpis” . W miarę możliwości i czasu postaram się materiał dopracować i dalej rozwijać.  ( razie pytań proszę o komentarz na dole [icon name=”arrow-down” class=”” unprefixed_class=””] )

Zalety dobrze przygotowanego  ” Workflow” :

  • pracujemy szybciej
  • nawet po kilku miesiącach przerwy nad projektem po powrocie bardzo szybko jesteśmy w stanie zorętować się gdzie skończyliśmy pracę, ewentualnie co należało by jeszcze poprawić
  • Jesteśmy w stanie szybko zlokalizować błędy i jej poprawić.
  • mamy lepszą kontrolę nad projektem.

 

Dobra od czego zaczynamy.

Wykaż narzędzi które nam będą potrzebne:

  • edytor tekstu notpad ++ , sublimetext ( ja używam sublime)
  • node.js
  • ruby
  • git
  • gulp

W folderze roboczym tworzę nowy katalog nazywam go „development”. W tym folderze będą znajdować się wszystkie moje pliki które będą w wersji developerskiej służyć, i nie idą do klienta.

W folderze development tworzę nowy folder o nazwie „sass”  znajdować się tu będą wszystkie pliki o foldery związane z sass jak jak sama nazwa wskazuje.

Ponieważ w tym przykładnie posługuje się szablonem dostarczonym przez Studio Presss  .   Muszę  podzielić na moduły i przerobić szablon css  na scss. ( szczegóły opiszę kiedyś później jak znajdę chwilę czasu 🙂 ).  Zaznaczę tylko że wy tym celu pomagam sobie następującą stroną = http://css2sass.herokuapp.com/.  Wszystkie przerobione moduły umieszczam w folderze „scss” wspomnianym wyżej.

 

 

1 . Uruchamiani kontrolę wersji  ( git )

Najpierw musimy zainstalować git. Wszystkie informacje można znaleźć pod adresem   https://git-scm.com/

2. Instalacja gulp GULP 

„nodejs.org ”   ( po zainstalowaniu nodejs   w terminalu wpisujemy)

npm install gulp--g

g na końcu oznacza że instalujemy gulp globalnie  aby się upewnić czy mamy zainstalowany GULP w terminalu wpisuję

gulp -v

jeśli wyświetli się numer zainstalowanej wersji to znaczy że gulp jest zainstalowany.

3 Dobrze teraz przechodzę do utworzenia pakietu w moim projekcie 

npm init

Pakiet zostanie utworzony automatycznie , ale można go później też zmienić

  •  nazwa pakietu
  • nr wersji
  • auror
  • licencja

Wszędzie naciskamy enter  po czym na końcu wpisuję „YES” , po skończonym procesie w naszym projekcie pojawia się plik package.json ,

Następne co musimy zrobić to zainstalować „GULP” lokalnie

npm install gulp --save-dev

czekamy chwilę , na terminalu mogą się pojawić napisy ” Warning” ale tym nie ma co się przejmować

po zakończonym  procesie w folderze naszego projektu pojawia się nowy folder „node_modules” ( naprawdę sporo rzeczy w nim jest 🙂 )  wszystkie pliki które znajdują się w tym folderze nie  są wysyłane ani do klienta ani do GIT  dlatego należy się upewnić aby zaznaczyć je w pliku „.gitignore”

#Development Files
/node_modules
/assets/vendor

w powyższym przypadku zaznaczyłem foldery które chcę aby były ignorowane przez GIT.

Po skończeniu powyższych czynności w naszym pliku „package.json”  pojawi depedencies

w tym przypadku będzie to wpis

„gulp”:”^3.9.1″

Trick: jeśli znamy wersję pluginów jakie chcemy zainstalować wystarczy uzupełnić plik „package.json”  po czym w terminalu wpisać

npm install

i zainstalują się nam wszystkie zależności.

W przypadku instalacji każdej zależności po kolei wygląda to następująco.

Na początku instaluję sobie sass

npm install gulp-sass --save-dev

potem instaluję sobie bourbon

npm install --save-dev node-bourbon

później instaluję neat

npm intall --save-dev node-neat

Kolejny etap to tworzenie zadań  które GUPL będzie obsługiwał 

Zaczynam od utworzenia pliku ” gulp.file.js

po utworzeniu pliku  uwieramy go i zaczynamy uzupełniać plik po uzupełnieniu wygląda następująco

'use strict';

var gulp = require('gulp'),

	// Sass/CSS processes
	bourbon = require('bourbon').includePaths,
	neat = require('bourbon-neat').includePaths,
	sass = require('gulp-sass'),
	postcss = require('gulp-postcss'),
	autoprefixer = require('autoprefixer'),
	sourcemaps = require('gulp-sourcemaps'),
	cssMinify = require('gulp-cssnano'),
	sassLint = require('gulp-sass-lint'),

	// Utilities
	rename = require('gulp-rename'),
	notify = require('gulp-notify'),
	plumber = require('gulp-plumber'),
	connect = require('gulp-connect')

/*************
 * Utilities
 ************/

/**
 * Error handling
 *
 * @function
 */
function handleErrors() {
	var args = Array.prototype.slice.call(arguments);

	notify.onError({
		title: 'Task Failed [<%= error.message %>',
		message: 'See console.',
		sound: 'Sosumi' // See: https://github.com/mikaelbr/node-notifier#all-notification-options-with-their-defaults
	}).apply(this, args);

	gutil.beep(); // Beep 'sosumi' again

	// Prevent the 'watch' task from stopping
	this.emit('end');
}


/*************
 * CSS Tasks
 ************/

/**
 * PostCSS Task Handler
 */
gulp.task('postcss', function(){

	return gulp.src('assets/sass/style.scss')

           // Error handling
           .pipe(plumber({
                errorHandler: handleErrors
           }))

	           // Wrap tasks in a sourcemap
			.pipe( sourcemaps.init())

			.pipe( sass({
				includePaths: [].concat( bourbon, neat ),
				errLogToConsole: true,
				outputStyle: 'expanded' // Options: nested, expanded, compact, compressed
			}))

		   .pipe( postcss([
			   autoprefixer({
				   browsers: ['last 2 versions']
			   })
		   ]))

			// creates the sourcemap
			.pipe(sourcemaps.write())

			.pipe(gulp.dest('../'));

});

gulp.task('css:minify', ['postcss'], function() {
	return gulp.src('../style.css')
       // Error handling
       .pipe(plumber({
           errorHandler: handleErrors
       }))

		.pipe( cssMinify({
			safe: true
		}))
       .pipe(rename('style.min.css'))
       .pipe(gulp.dest('../'))
       .pipe(notify({
			message: 'Styles are built.'
		}))
	
});

gulp.task('sass:lint', ['css:minify'], function() {
	gulp.src([
		'assets/sass/style.scss',
		'!assets/sass/base/html5-reset/_normalize.scss',
		'!assets/sass/utilities/animate/**/*.*'
	])
		.pipe(sassLint())
		.pipe(sassLint.format())
		.pipe(sassLint.failOnError())
});


/********************
 * All Tasks Listeners
 *******************/

gulp.task('watch', function () {
	gulp.watch('assets/sass/**/*.scss', ['styles']) .on('change', browserSync.reload);
  gulp.watch(['../*.php']).on('change', browserSync.reload);
  gulp.watch(['../*.js']).on('change', browserSync.reload);
});




/**
 * Individual tasks.
 */
// gulp.task('scripts', [''])
gulp.task('styles', ['sass:lint'] );


var gulp        = require('gulp');
var browserSync = require('browser-sync').create();


gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "http://localhost/intellegro/"
    });
});

gulp.task('default', ['browser-sync', 'watch', 'css:minify','sass:lint']);