Gulp – skrypty – Kurs WordPress

Gulp – skrypty

Gulp – skrypty to kontynuacja naszej przygody z Gulpem. Jeżeli trafiłeś od razu tutaj, proponuję przejrzenie poprzednich części, spis treści znajdziesz z prawej strony.

Jakie skrypty?

Ano właśnie, tutaj możemy mieć mały problem. Pisząc skrypty, mam na myśli JavaScript, ale jak to jest z dostępnością we współczesnych przeglądarkach? Ano, trochę tak, trochę tak. Pierwszy problem, to sama obecność JavaScript w przeglądarce. Bywa tak, że użytkownicy celowo wyłączają obsługę JavaScript i na to nic nie poradzimy. Możemy takich użytkowników zignorować, albo tworzyć kod, pozwalający na operacje brzydsze i wolniejsze, ale nadal działający. Twój wybór. Drugi problem, to poziom języka, który jest obsługiwany. JavaScript ma kilka wersji, rozwija się i nie zawsze możemy być pewni, że wszystko nam wszędzie zadziała. Dla ścisłości, możemy być pewni, że tak nie będzie. Ale… Gulp i phpStorm nam w tym pomogą. Wobec tego, wracajmy do naszej wtyczki „Hello World” i postarajmy się dodać trochę kodu.

Gulp - skrypty a raczej ich katalog źródłowy ze skryptami Stworzyłem katalog hello-world/source/javascript, jak na załączonym obrazku. Wstępnie zamieściłem w nim trzy pliki – initialize.js, 'dom-operations.js oraz finalize.js. Jak wynika z ich nazw, chciałbym je połączyć właśnie w takiej kolejności. Przy czym, gdyby się pojawił czwarty plik - choćby clicking.js czy dialogs.js, w tej chwili nie ma to znaczenia, to ich kolejność już nie jest istotna. Najważniejsze to zacząć od initialize.js a zakończyć finalize.js. Dodatkowa informacja - kod Gulp, który przetworzy nasze skrypty, może wykonywać się równolegle do kodu przetwarzającego style.


Gulp - skrypty okiełznane
Tworzymy sobie zdanie, które przetworzy nasze skrypty:


		
		
			
			
JavaScript
			
			gulp.task('scripts', function (done) {
	gulp.src([
		script_path + 'initialize.js',
		script_path + '*.js',
		script_path + 'finalize.js',
	])
		.pipe( concat('hello-world.min.js') )
		.pipe( make_ugly() )
		.pipe( gulp.dest(assets_path + 'js/') );
	done();
});
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						gulp.task('scripts', function (done) {
	gulp.src([
		script_path + 'initialize.js',
		script_path + '*.js',
		script_path + 'finalize.js',
	])
		.pipe( concat('hello-world.min.js') )
		.pipe( make_ugly() )
		.pipe( gulp.dest(assets_path + 'js/') );
	done();
});
					
				
			
		


Dodajemy wywołanie do zadania domyślnego:


		
		
			
			
JavaScript
			
			gulp.task('default', gulp.parallel('styles', 'scripts'));
			
				
					
				
					1
				
						gulp.task('default', gulp.parallel('styles', 'scripts'));

Musimy dodać jeszcze definicję funkcji make_ugly (z pakietu uglify) i możemy uruchamiać. Dla jasności dołączę pełen kod:




		
		
			gulpfile.js
			
JavaScript
			
			'use strict';

let stylesheet_path = './source/stylesheets/',
	script_path = './source/javascript/',
	assets_path = './wordpress/wp-content/plugins/hello-world/assets/',
	gulp = require('gulp'),
	auto_prefix = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	concat = require('gulp-concat'),
	make_ugly = require('gulp-uglify');

gulp.task('styles', function (done) {
	gulp.src([
		stylesheet_path + 'css/*.css',
		stylesheet_path + 'sass/*.scss',
	])
		.pipe(auto_prefix())
		.pipe(sass({outputStyle: 'compressed'}))
		.pipe(concat('hello-world.min.css'))
		.pipe(gulp.dest(assets_path + 'css/'));
	done();
});

gulp.task('scripts', function (done) {
	gulp.src([
		script_path + 'initialize.js',
		script_path + '*.js',
		script_path + 'finalize.js',
	])
		.pipe( concat('hello-world.min.js') )
		.pipe( make_ugly() )
		.pipe( gulp.dest(assets_path + 'js/') );
	done();
});

gulp.task('default', gulp.parallel('styles', 'scripts'));
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
				
						'use strict';
 
let stylesheet_path = './source/stylesheets/',
	script_path = './source/javascript/',
	assets_path = './wordpress/wp-content/plugins/hello-world/assets/',
	gulp = require('gulp'),
	auto_prefix = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	concat = require('gulp-concat'),
	make_ugly = require('gulp-uglify');
 
gulp.task('styles', function (done) {
	gulp.src([
		stylesheet_path + 'css/*.css',
		stylesheet_path + 'sass/*.scss',
	])
		.pipe(auto_prefix())
		.pipe(sass({outputStyle: 'compressed'}))
		.pipe(concat('hello-world.min.css'))
		.pipe(gulp.dest(assets_path + 'css/'));
	done();
});
 
gulp.task('scripts', function (done) {
	gulp.src([
		script_path + 'initialize.js',
		script_path + '*.js',
		script_path + 'finalize.js',
	])
		.pipe( concat('hello-world.min.js') )
		.pipe( make_ugly() )
		.pipe( gulp.dest(assets_path + 'js/') );
	done();
});
 
gulp.task('default', gulp.parallel('styles', 'scripts'));
					
				
			
		


Uruchamiamy zadanie domyślne i wszystko działa!


		
		
			
			

			
			"C:\Program Files\JetBrains\PhpStorm 2018.1.6\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\bin\projects\kursy\hello-world\node_modules\gulp\bin\gulp.js --color --gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js default
[16:12:55] Using gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js
[16:12:55] Starting 'default'...
[16:12:55] Starting 'styles'...
[16:12:55] Starting 'scripts'...
[16:12:55] Finished 'styles' after 13 ms
[16:12:55] Finished 'scripts' after 16 ms
[16:12:55] Finished 'default' after 18 ms

Process finished with exit code 0
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
				
						"C:\Program Files\JetBrains\PhpStorm 2018.1.6\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\bin\projects\kursy\hello-world\node_modules\gulp\bin\gulp.js --color --gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js default
[16:12:55] Using gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js
[16:12:55] Starting 'default'...
[16:12:55] Starting 'styles'...
[16:12:55] Starting 'scripts'...
[16:12:55] Finished 'styles' after 13 ms
[16:12:55] Finished 'scripts' after 16 ms
[16:12:55] Finished 'default' after 18 ms
 
Process finished with exit code 0
					
				
			
		

No ale nie oszukujmy się, długo to nie podziała.
Gulp - skrypty nie działające

Dlaczego długo nie podziała? No, pięknie nam to zebrało trzy pliki, stworzyło jeden, ale jest jedno ale. Ano takie, że te pliki (initialize.js, finalize.js oraz dom-operations.js) były po prostu puste. Nic tam się nie działo. Napiszmy więc trochę kodu:




		
		
			initialize.js
			
JavaScript
			
			'use strict';

let HelloWorld = {};
let $ = jQuery.noConflict();
			
				
					
				
					1
2
3
4
				
						'use strict';
 
let HelloWorld = {};
let $ = jQuery.noConflict();
					
				
			
		

Proste, prawda? No, to spróbujmy to sobie potraktować Gulpem...


		
		
			
			

			
			"C:\Program Files\JetBrains\PhpStorm 2018.1.6\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\bin\projects\kursy\hello-world\node_modules\gulp\bin\gulp.js --color --gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js default
[16:33:02] Using gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js
[16:33:02] Starting 'default'...
[16:33:02] Starting 'styles'...
[16:33:02] Starting 'scripts'...
[16:33:02] Finished 'styles' after 14 ms
[16:33:02] Finished 'scripts' after 16 ms
[16:33:02] Finished 'default' after 18 ms

events.js:183
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript
    at createError (C:\bin\projects\kursy\hello-world\node_modules\gulp-uglify\lib\create-error.js:6:14)
    at apply (C:\bin\projects\kursy\hello-world\node_modules\lodash\_apply.js:16:25)
    at wrapper (C:\bin\projects\kursy\hello-world\node_modules\lodash\_createCurry.js:41:12)
    at C:\bin\projects\kursy\hello-world\node_modules\gulp-uglify\lib\minify.js:55:15
    at DestroyableTransform._transform (C:\bin\projects\kursy\hello-world\node_modules\gulp-uglify\composer.js:12:19)
    at DestroyableTransform.Transform._read (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_transform.js:172:83)
    at doWrite (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_writable.js:428:64)
    at writeOrBuffer (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_writable.js:334:11)

Process finished with exit code 1
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						"C:\Program Files\JetBrains\PhpStorm 2018.1.6\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\bin\projects\kursy\hello-world\node_modules\gulp\bin\gulp.js --color --gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js default
[16:33:02] Using gulpfile C:\bin\projects\kursy\hello-world\gulpfile.js
[16:33:02] Starting 'default'...
[16:33:02] Starting 'styles'...
[16:33:02] Starting 'scripts'...
[16:33:02] Finished 'styles' after 14 ms
[16:33:02] Finished 'scripts' after 16 ms
[16:33:02] Finished 'default' after 18 ms
 
events.js:183
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript
    at createError (C:\bin\projects\kursy\hello-world\node_modules\gulp-uglify\lib\create-error.js:6:14)
    at apply (C:\bin\projects\kursy\hello-world\node_modules\lodash\_apply.js:16:25)
    at wrapper (C:\bin\projects\kursy\hello-world\node_modules\lodash\_createCurry.js:41:12)
    at C:\bin\projects\kursy\hello-world\node_modules\gulp-uglify\lib\minify.js:55:15
    at DestroyableTransform._transform (C:\bin\projects\kursy\hello-world\node_modules\gulp-uglify\composer.js:12:19)
    at DestroyableTransform.Transform._read (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_transform.js:172:83)
    at doWrite (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_writable.js:428:64)
    at writeOrBuffer (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (C:\bin\projects\kursy\hello-world\node_modules\readable-stream\lib\_stream_writable.js:334:11)
 
Process finished with exit code 1
					
				
			
		

Co to się porobiło... Od razu powiem o co chodzi. O let. Gdybyśmy zamiast let napisali var, wszystko by zadziałało. Problem jest tylko taki, że var uznane by było za błąd przez phpStorm. W zasadzie - dostalibyśmy ostrzeżenie i poradę:

Moglibyśmy wyłączyć tę inspekcję i jej nie oglądać, ale nie na tym polega. PhpStorm radzi nam dobrze, więc pozostawiamy let i... I musimy sobie poradzić z uglify. Na szczęście jest rozwiązanie! Zaczniemy od dawno nie używanego pliku packages.json i dodamy dwie zależności - uglify-es oraz pump. Zależności uglify nie usuwamy! Teraz plik wygląda tak:




		
		
			packages.json
			
JavaScript
			
			{
    "name": "hello-world",
    "version": "1.0.1",
    "devDependencies": {
        "gulp": "^4.0.0",
        "gulp-autoprefixer": "^5.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-sass": "^4.0.1",
        "uglify-es": "^3.3.9",
        "pump": "^3.0.0",
        "gulp-uglify": "^3.0.1"
    },
    "dependencies": {
        "requirejs": "^2.3.5"
    }
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
				
						{
    "name": "hello-world",
    "version": "1.0.1",
    "devDependencies": {
        "gulp": "^4.0.0",
        "gulp-autoprefixer": "^5.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-sass": "^4.0.1",
        "uglify-es": "^3.3.9",
        "pump": "^3.0.0",
        "gulp-uglify": "^3.0.1"
    },
    "dependencies": {
        "requirejs": "^2.3.5"
    }
}
					
				
			
		

Musimy też dosyć mocno przerobić nasze zadanie, dodać deklaracje, zmienić jedną deklarację... Cały plik:


		
		
			gulpfile.js
			
JavaScript
			
			'use strict';

let stylesheet_path = './source/stylesheets/',
	script_path = './source/javascript/',
	assets_path = './wordpress/wp-content/plugins/hello-world/assets/',
	gulp = require('gulp'),
	auto_prefix = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	concat = require('gulp-concat'),
	make_ugly = require('uglify-es'),
	make_ugly_composer = require('gulp-uglify/composer'),
	pump = require('pump'),
	minimize = make_ugly_composer(make_ugly, console);

gulp.task('styles', function (done) {
	gulp.src([
		stylesheet_path + 'css/*.css',
		stylesheet_path + 'sass/*.scss',
	])
		.pipe(auto_prefix())
		.pipe(sass({outputStyle: 'compressed'}))
		.pipe(concat('hello-world.min.css'))
		.pipe(gulp.dest(assets_path + 'css/'));
	done();
});

gulp.task('scripts', function (done) {
	pump([
		gulp.src([
			script_path + 'initialize.js',
			script_path + '*.js',
			script_path + 'finalize.js',
		]),
		concat('hello-world.min.js'),
		minimize(),
		gulp.dest(assets_path + 'js/')
	], done);
	done();
});

gulp.task('default', gulp.parallel('styles', 'scripts'));
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
				
						'use strict';
 
let stylesheet_path = './source/stylesheets/',
	script_path = './source/javascript/',
	assets_path = './wordpress/wp-content/plugins/hello-world/assets/',
	gulp = require('gulp'),
	auto_prefix = require('gulp-autoprefixer'),
	sass = require('gulp-sass'),
	concat = require('gulp-concat'),
	make_ugly = require('uglify-es'),
	make_ugly_composer = require('gulp-uglify/composer'),
	pump = require('pump'),
	minimize = make_ugly_composer(make_ugly, console);
 
gulp.task('styles', function (done) {
	gulp.src([
		stylesheet_path + 'css/*.css',
		stylesheet_path + 'sass/*.scss',
	])
		.pipe(auto_prefix())
		.pipe(sass({outputStyle: 'compressed'}))
		.pipe(concat('hello-world.min.css'))
		.pipe(gulp.dest(assets_path + 'css/'));
	done();
});
 
gulp.task('scripts', function (done) {
	pump([
		gulp.src([
			script_path + 'initialize.js',
			script_path + '*.js',
			script_path + 'finalize.js',
		]),
		concat('hello-world.min.js'),
		minimize(),
		gulp.dest(assets_path + 'js/')
	], done);
	done();
});
 
gulp.task('default', gulp.parallel('styles', 'scripts'));

Teraz możemy sobie to włączyć i działa bez pudła! Ale podkreśla nam jQuery oraz noConflict`. Po prostu phpStorm nie wie, że chcemy dodać bibliotekę jQuery do naszego projektu. A praktycznie – chcemy wykorzystać tą, która jest serwowana przez WordPress. Ano, nic trudnego. Wchodzimy w ustawienia phpStorm, wybieramy Languages & Frameworks, następnie JavaScript, potem Libraries i zaznaczamy pozycję: @types/jquery. Już po wszystkim, działa. Dopiszemy sobie jeszcze dwa pozostałe pliki, które w zasadzie nic nie zrobią, ale pokażą nam jakąś tam strukturę i wypiszą w konsoli informację, że zostały załadowane:

HelloWorld.DomOperations = {

	Init: function () {
		console.log('DomOperations initialized');
	}

};

HelloWorld.DomOperations = {

Init: function () {

console.log('DomOperations initialized');

}

};

HelloWorld.Init = function () {
	this.DomOperations.Init();
};

$(function () {
	HelloWorld.Init();
});

HelloWorld.Init = function () {

this.DomOperations.Init();

};

$(function () {

HelloWorld.Init();

});

Teraz możemy te trzy pliki skompilować, wszystko się uda. Plik wynikowy będzie wyglądał okropnie, ale po trochu o to chodzi. Ma działać, ma być krótki, czytelny być nie musi:

"use strict";let HelloWorld={},$=jQuery.noConflict();HelloWorld.DomOperations={Init:function(){console.log("DomOperations initialized")}},HelloWorld.Init=function(){this.DomOperations.Init()},$(function(){HelloWorld.Init()});

1	"use strict";let HelloWorld={},$=jQuery.noConflict();HelloWorld.DomOperations={Init:function(){console.log("DomOperations initialized")}},HelloWorld.Init=function(){this.DomOperations.Init()},$(function(){HelloWorld.Init()});

Gulp – skrypty i ich testowanie

Plik się skompilował, ale jak niby mamy sprawdzić jego działanie? Mając już naszą wiedzę możemy powoli udać się do właściwej, pierwszej części kursu pisania wtyczek i szablonów dla WordPress.