kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-04 04:25:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: replace SVG cover image with PNG

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-11 18:07:43 +02:00
parent d959af246d
commit 7d2857180f
20 changed files with 304 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/content/journal/2009/git.mdx
View File

@@ -4,7 +4,7 @@ slug: git
author: Stefan Imhoff
date: 2009-02-10T20:00:00+02:00
description: An extensive collection of links to tutorials, tutorials, screencasts, and documentation on Git.
cover: /assets/images/cover/git.svg
cover: /assets/images/cover/git.jpg
tags: ["code"]
---

12
src/content/journal/2014/gulp-tutorial-1-intro-setup.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-1-intro-setup
author: Stefan Imhoff
date: 2014-10-18T08:35:47+02:00
description: "The ultimate tutorial and guide for Gulp.js: The first part of my series on Gulp.js. What is Gulp.js? Why use it? And how to install Gulp and Jekyll."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -60,10 +60,10 @@ You may use the installation helper by typing the command `npm init`. But I find
```json
{
"name": "gulp-build",
"version": "0.0.1",
"description": "The build process of my website with Gulp.js",
"private": true
"name": "gulp-build",
"version": "0.0.1",
"description": "The build process of my website with Gulp.js",
"private": true
}
```
@@ -143,5 +143,5 @@ Did you install it globally? Then drop the `bundle exec` from the command.
This concludes the 1st part of my series _Introduction to Gulp.js_. We learned what Gulp.js is used for and created the basic folder structure for the project.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

10
src/content/journal/2014/gulp-tutorial-10-generating-sprites.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-10-generating-sprites
author: Stefan Imhoff
date: 2014-10-27T07:40:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to generate image sprite maps with Spritesmith."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -63,11 +63,11 @@ var config = require("../../config").sprites;
* Generate sprite and CSS files from PNGs
*/
gulp.task("sprites", function () {
var spriteData = gulp.src(config.src).pipe(spritesmith(config.options));
var spriteData = gulp.src(config.src).pipe(spritesmith(config.options));
spriteData.img.pipe(gulp.dest(config.dest.image));
spriteData.img.pipe(gulp.dest(config.dest.image));
spriteData.css.pipe(gulp.dest(config.dest.css));
spriteData.css.pipe(gulp.dest(config.dest.css));
});
```
@@ -82,5 +82,5 @@ Next, I will write the tasks needed to get a production-ready code.
This concludes the 10th part of my series, _Introduction to Gulp.js_. Today, we learned how to create CSS image sprites with Gulp.js and Spritesmith.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

58
src/content/journal/2014/gulp-tutorial-11-production-build-server-and-jekyll.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-11-production-build-server-and-jekyll
author: Stefan Imhoff
date: 2014-10-28T07:30:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to write the production task for Jekyll and BrowserSync."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -61,7 +61,7 @@ var config = require("../../config").browsersync.production;
* Start a server and watch changes with BrowserSync
*/
gulp.task("browsersync:production", ["build:production"], function () {
browsersync(config);
browsersync(config);
});
```
@@ -79,16 +79,16 @@ var runSequence = require("run-sequence");
* Run all tasks needed for a build in the defined order
*/
gulp.task("build:production", function (callback) {
runSequence(
"delete",
"jekyll:production",
["sass", "scripts", "images", "copy:fonts"],
"base64",
["optimize:css", "optimize:js", "optimize:images", "optimize:html", "copy:fonts:production"],
"revision",
"rev:collect",
callback
);
runSequence(
"delete",
"jekyll:production",
["sass", "scripts", "images", "copy:fonts"],
"base64",
["optimize:css", "optimize:js", "optimize:images", "optimize:html", "copy:fonts:production"],
"revision",
"rev:collect",
callback
);
});
```
@@ -135,23 +135,23 @@ var config = require("../../config").jekyll.production;
* Build the Jekyll Site
*/
gulp.task("jekyll:production", function (done) {
browsersync.notify("Compiling Jekyll (Production)");
browsersync.notify("Compiling Jekyll (Production)");
return cp
.spawn(
"bundle",
[
"exec",
"jekyll",
"build",
"-q",
"--source=" + config.src,
"--destination=" + config.dest,
"--config=" + config.config,
],
{ stdio: "inherit" }
)
.on("close", done);
return cp
.spawn(
"bundle",
[
"exec",
"jekyll",
"build",
"-q",
"--source=" + config.src,
"--destination=" + config.dest,
"--config=" + config.config,
],
{ stdio: "inherit" }
)
.on("close", done);
});
```
@@ -160,5 +160,5 @@ gulp.task("jekyll:production", function (done) {
This concludes the 11th part of my series _Introduction to Gulp.js_. Today, I started to work on the production part of my website, including a server to view the production site and generate a production build of my Jekyll site.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

28
src/content/journal/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-12-optimize-css-javascript-images-and-html
author: Stefan Imhoff
date: 2014-10-29T08:00:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to optimize CSS, JavaScript, images, and HTML to speed up your website."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -47,7 +47,7 @@ var config = require("../../config").optimize.css;
* Copy and minimize CSS files
*/
gulp.task("optimize:css", function () {
return gulp.src(config.src).pipe(csso(config.options)).pipe(gulp.dest(config.dest)).pipe(size());
return gulp.src(config.src).pipe(csso(config.options)).pipe(gulp.dest(config.dest)).pipe(size());
});
```
@@ -88,11 +88,11 @@ var config = require("../../config").optimize.js;
* Copy and minimize JS files
*/
gulp.task("optimize:js", function () {
return gulp
.src(config.src)
.pipe(uglify(config.options))
.pipe(gulp.dest(config.dest))
.pipe(size());
return gulp
.src(config.src)
.pipe(uglify(config.options))
.pipe(gulp.dest(config.dest))
.pipe(size());
});
```
@@ -150,11 +150,11 @@ var config = require("../../config").optimize.images;
* Copy and minimize image files
*/
gulp.task("optimize:images", function () {
return gulp
.src(config.src)
.pipe(imagemin(config.options))
.pipe(gulp.dest(config.dest))
.pipe(size());
return gulp
.src(config.src)
.pipe(imagemin(config.options))
.pipe(gulp.dest(config.dest))
.pipe(size());
});
```
@@ -202,7 +202,7 @@ var config = require("../../config").optimize.html;
* Minimize HTML
*/
gulp.task("optimize:html", function () {
return gulp.src(config.src).pipe(htmlmin(config.options)).pipe(gulp.dest(config.dest));
return gulp.src(config.src).pipe(htmlmin(config.options)).pipe(gulp.dest(config.dest));
});
```
@@ -211,5 +211,5 @@ gulp.task("optimize:html", function () {
This concludes the 12th part of my series _Introduction to Gulp.js_. Today we learned how to minimize CSS and JavaScript files and reduce the size of images.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

22
src/content/journal/2014/gulp-tutorial-13-revisioning.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-13-revisioning
author: Stefan Imhoff
date: 2014-10-30T07:45:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to use revisioning to allow long caching of your assets and replace them with hashed file names, that can be cache-busted."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -39,7 +39,7 @@ var config = require("../../config").copyfonts.production;
* Copy fonts to folder
*/
gulp.task("copy:fonts:production", function () {
return gulp.src(config.src).pipe(gulp.dest(config.dest));
return gulp.src(config.src).pipe(gulp.dest(config.dest));
});
```
@@ -95,13 +95,13 @@ var config = require("../../config").revision;
* write a manifest file
*/
gulp.task("revision", function () {
return gulp
.src(config.src.assets, { base: config.src.base })
.pipe(gulp.dest(config.dest.assets))
.pipe(rev())
.pipe(gulp.dest(config.dest.assets))
.pipe(rev.manifest({ path: config.dest.manifest.name }))
.pipe(gulp.dest(config.dest.manifest.path));
return gulp
.src(config.src.assets, { base: config.src.base })
.pipe(gulp.dest(config.dest.assets))
.pipe(rev())
.pipe(gulp.dest(config.dest.assets))
.pipe(rev.manifest({ path: config.dest.manifest.name }))
.pipe(gulp.dest(config.dest.manifest.path));
});
```
@@ -142,7 +142,7 @@ var config = require("../../config").collect;
* from a manifest file
*/
gulp.task("rev:collect", function () {
return gulp.src(config.src).pipe(collect()).pipe(gulp.dest(config.dest));
return gulp.src(config.src).pipe(collect()).pipe(gulp.dest(config.dest));
});
```
@@ -155,5 +155,5 @@ The production build is finished! Only one thing is missing to complete this ser
This concludes the 13th part of my series, _Introduction to Gulp.js_. Today we learned how to revise the asset files and replace links to these files.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

6
src/content/journal/2014/gulp-tutorial-14-deploying-the-website.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-14-deploying-the-website
author: Stefan Imhoff
date: 2014-10-31T08:00:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to deploy your website with rsync to your server."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -70,7 +70,7 @@ var config = require("../../config").rsync;
* via rsync
*/
gulp.task("rsync", function () {
return gulp.src(config.src).pipe(rsync(config.options));
return gulp.src(config.src).pipe(rsync(config.options));
});
```
@@ -81,5 +81,5 @@ This concludes the series _Introduction to Gulp.js_. Developing and deploying wi
I like the UNIX philosophy of Gulp.js: Having small files, which do one task and connect these to larger workflows. And because I kept my Gulp.js tasks small, pluggable, and shareable, I was able to add Gulp.js to my second website in less than five minutes.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

44
src/content/journal/2014/gulp-tutorial-15-performance-improvements-webp-gzip.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-15-performance-improvements-webp-gzip
author: Stefan Imhoff
date: 2014-12-21T11:15:00+01:00
description: "The ultimate tutorial and guide for Gulp.js: How to improve the speed and performance of your website with WebP and Gzip."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -50,7 +50,7 @@ var config = require("../../config").webp;
* Convert images to WebP
*/
gulp.task("webp", function () {
return gulp.src(config.src).pipe(webp(config.options)).pipe(gulp.dest(config.dest));
return gulp.src(config.src).pipe(webp(config.options)).pipe(gulp.dest(config.dest));
});
```
@@ -66,15 +66,15 @@ var runSequence = require("run-sequence");
* Run all tasks needed for a build in the defined order
*/
gulp.task("build:production", function (callback) {
runSequence(
"delete",
"jekyll:production",
// ...,
"revision",
"rev:collect",
"webp",
callback
);
runSequence(
"delete",
"jekyll:production",
// ...,
"revision",
"rev:collect",
"webp",
callback
);
});
```
@@ -149,7 +149,7 @@ var config = require("../../config").gzip;
* Gzip text files
*/
gulp.task("gzip", function () {
return gulp.src(config.src).pipe(gzip(config.options)).pipe(gulp.dest(config.dest));
return gulp.src(config.src).pipe(gzip(config.options)).pipe(gulp.dest(config.dest));
});
```
@@ -165,15 +165,15 @@ var runSequence = require("run-sequence");
* Run all tasks needed for a build in the defined order
*/
gulp.task("build:production", function (callback) {
runSequence(
"delete",
"jekyll:production",
// ...,
"revision",
"rev:collect",
["webp", "gzip"],
callback
);
runSequence(
"delete",
"jekyll:production",
// ...,
"revision",
"rev:collect",
["webp", "gzip"],
callback
);
});
```
@@ -182,5 +182,5 @@ gulp.task("build:production", function (callback) {
This concludes the 15th part of my series _Introduction to Gulp.js_. We learned how to convert images to the WebP format and how to compress text files with Gzip. Every byte we can reduce will increase the speed of the website.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

58
src/content/journal/2014/gulp-tutorial-16-postcss.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-16-postcss
author: Stefan Imhoff
date: 2014-12-30T07:50:29+00:00
description: "The ultimate tutorial and guide for Gulp.js: How to use PostCSS with Gulp to process CSS and how to lint your CSS files with Stylelint."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -86,9 +86,9 @@ var mqpacker = require("css-mqpacker");
var config = require("../../config");
function onError(err) {
gutil.beep();
console.log(err);
this.emit("end");
gutil.beep();
console.log(err);
this.emit("end");
}
/**
@@ -96,26 +96,26 @@ function onError(err) {
* Build sourcemaps and minimize
*/
var processors = [
precss(config.styles.options.precss),
autoprefixer(config.styles.options.autoprefixer),
mqpacker(config.styles.options.mqpacker),
precss(config.styles.options.precss),
autoprefixer(config.styles.options.autoprefixer),
mqpacker(config.styles.options.mqpacker),
];
gulp.task("styles", function () {
browsersync.notify("Transforming CSS with PostCSS");
browsersync.notify("Transforming CSS with PostCSS");
return gulp
.src(config.styles.src)
.pipe(
plumber({
errorHandler: onError,
})
)
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(nano())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(config.styles.dest));
return gulp
.src(config.styles.src)
.pipe(
plumber({
errorHandler: onError,
})
)
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(nano())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(config.styles.dest));
});
```
@@ -275,14 +275,14 @@ var reporter = require("postcss-reporter");
var config = require("../../config");
gulp.task("lint-styles", function () {
return gulp
.src(config.lintStyles.src)
.pipe(
postcss([
stylelint(config.lintStyles.options.stylelint),
reporter(config.lintStyles.options.reporter),
])
);
return gulp
.src(config.lintStyles.src)
.pipe(
postcss([
stylelint(config.lintStyles.options.stylelint),
reporter(config.lintStyles.options.reporter),
])
);
});
```
@@ -306,5 +306,5 @@ I’m sure we will see more exciting Plugins in the future.
This concludes the 16th part of my series _Introduction to Gulp.js_. We learned how to use PostCSS to process our CSS files and how to use Stylelint to lint the CSS files for errors.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

36
src/content/journal/2014/gulp-tutorial-2-development-server-browsersync-configuration.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-2-development-server-browsersync-configuration
author: Stefan Imhoff
date: 2014-10-19T10:17:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to set up a development server with BrowserSync."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -29,7 +29,7 @@ I create inside the `gulp/tasks` folder a file `default.js` and write this code:
var gulp = require("gulp");
gulp.task("default", function () {
console.log("Hello Gulp.js!");
console.log("Hello Gulp.js!");
});
```
@@ -93,7 +93,7 @@ var config = require("../../config").browsersync.development;
* Run the build task and start a server with BrowserSync
*/
gulp.task("browsersync", ["build"], function () {
browsersync(config);
browsersync(config);
});
```
@@ -117,20 +117,20 @@ var developmentAssets = "build/assets";
var productionAssets = "build/production/assets";
module.exports = {
browsersync: {
development: {
server: {
baseDir: [development, build, src],
},
port: 9999,
files: [
developmentAssets + "/css/*.css",
developmentAssets + "/js/*.js",
developmentAssets + "/images/**",
developmentAssets + "/fonts/*",
],
},
},
browsersync: {
development: {
server: {
baseDir: [development, build, src],
},
port: 9999,
files: [
developmentAssets + "/css/*.css",
developmentAssets + "/js/*.js",
developmentAssets + "/images/**",
developmentAssets + "/fonts/*",
],
},
},
};
```
@@ -145,5 +145,5 @@ BrowserSync watches my asset files, in order that my browser won’t reload like
This concludes the 2nd part of my series _Introduction to Gulp.js_. We learned how to install Gulp.js, write a Gulp.js task, run other tasks, and set up a development server with BrowserSync.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

42
src/content/journal/2014/gulp-tutorial-3-build-clean-jekyll.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-3-build-clean-jekyll
author: Stefan Imhoff
date: 2014-10-20T10:00:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to write tasks for cleaning files and folders, generating the build and the website with Jekyll."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -31,7 +31,7 @@ var runSequence = require("run-sequence");
* Run all tasks needed for a build in a defined order
*/
gulp.task("build", function (callback) {
runSequence("delete", ["jekyll", "sass", "scripts", "images", "copy:fonts"], "base64", callback);
runSequence("delete", ["jekyll", "sass", "scripts", "images", "copy:fonts"], "base64", callback);
});
```
@@ -75,7 +75,7 @@ var config = require("../../config").delete;
* Delete folders and files
*/
gulp.task("delete", function (callback) {
del(config.src, callback);
del(config.src, callback);
});
```
@@ -109,27 +109,27 @@ var config = require("../../config").jekyll.development;
* Build the Jekyll Site
*/
gulp.task("jekyll", function (done) {
browsersync.notify("Compiling Jekyll");
browsersync.notify("Compiling Jekyll");
return cp
.spawn(
"bundle",
[
"exec",
"jekyll",
"build",
"-q",
"--source=" + config.src,
"--destination=" + config.dest,
"--config=" + config.config,
],
{ stdio: "inherit" }
)
.on("close", done);
return cp
.spawn(
"bundle",
[
"exec",
"jekyll",
"build",
"-q",
"--source=" + config.src,
"--destination=" + config.dest,
"--config=" + config.config,
],
{ stdio: "inherit" }
)
.on("close", done);
});
gulp.task("jekyll-rebuild", ["jekyll"], function () {
browsersync.reload();
browsersync.reload();
});
```
@@ -152,5 +152,5 @@ I have a second Jekyll build task `jekyll-rebuild`, which is only a wrapper for
This concludes the 3rd part of my series, _Introduction to Gulp.js_. We learned how to run files in specified order with `run-sequence`, how to delete files and folders, and how to execute a shell task like Jekyll.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

40
src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-4-css-generation-sass
author: Stefan Imhoff
date: 2014-10-21T10:30:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to create CSS and Source Maps with Sass and Compass."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -67,28 +67,28 @@ var config = require("../../config");
* Build sourcemaps
*/
gulp.task("sass", function () {
var sassConfig = config.sass.options;
var sassConfig = config.sass.options;
sassConfig.onError = browsersync.notify;
sassConfig.onError = browsersync.notify;
// Don’t write sourcemaps of sourcemaps
var filter = gulpFilter(["*.css", "!*.map"], { restore: true });
// Don’t write sourcemaps of sourcemaps
var filter = gulpFilter(["*.css", "!*.map"], { restore: true });
browsersync.notify("Compiling Sass");
browsersync.notify("Compiling Sass");
return sass(config.sass.src, sassConfig)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(autoprefixer(config.autoprefixer))
.pipe(filter) // Don’t write sourcemaps of sourcemaps
.pipe(
sourcemaps.write(".", {
includeContent: false,
sourceRoot: "app/_assets/scss",
})
)
.pipe(filter.restore) // Restore original files
.pipe(gulp.dest(config.sass.dest));
return sass(config.sass.src, sassConfig)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(autoprefixer(config.autoprefixer))
.pipe(filter) // Don’t write sourcemaps of sourcemaps
.pipe(
sourcemaps.write(".", {
includeContent: false,
sourceRoot: "app/_assets/scss",
})
)
.pipe(filter.restore) // Restore original files
.pipe(gulp.dest(config.sass.dest));
});
```
@@ -103,5 +103,5 @@ You might have guessed: If you wish to use Compass, set the option `compass` to
This concludes the 4th part of my series, _Introduction to Gulp.js_. We learned how to keep Gulp.js running, even when we produce errors, how to preprocess SCSS files with Sass, create Source Maps, and add vendor prefixes to the CSS files.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

186
src/content/journal/2014/gulp-tutorial-5-javascripts-browserify.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-5-javascripts-browserify
author: Stefan Imhoff
date: 2014-10-22T08:00:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to bundle JavaScript files with Browserify and use CommonJS modules to structure and organize your code."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -67,69 +67,69 @@ var config = require("../../config").browserify;
* Run JavaScript through Browserify
*/
gulp.task("scripts", function (callback) {
browsersync.notify("Compiling JavaScript");
browsersync.notify("Compiling JavaScript");
var bundleQueue = config.bundleConfigs.length;
var bundleQueue = config.bundleConfigs.length;
var browserifyThis = function (bundleConfig) {
var bundler = browserify({
// Required watchify args
cache: {},
packageCache: {},
fullPaths: false,
// Specify the entry point of your app
entries: bundleConfig.entries,
// Add file extensions to make optional in your requires
extensions: config.extensions,
// Enable source maps!
debug: config.debug,
});
var browserifyThis = function (bundleConfig) {
var bundler = browserify({
// Required watchify args
cache: {},
packageCache: {},
fullPaths: false,
// Specify the entry point of your app
entries: bundleConfig.entries,
// Add file extensions to make optional in your requires
extensions: config.extensions,
// Enable source maps!
debug: config.debug,
});
var bundle = function () {
// Log when bundling starts
bundleLogger.start(bundleConfig.outputName);
var bundle = function () {
// Log when bundling starts
bundleLogger.start(bundleConfig.outputName);
return (
bundler
.bundle()
// Report compile errors
.on("error", handleErrors)
// Use vinyl-source-stream to make the
// stream gulp compatible. Specify the
// desired output filename here.
.pipe(source(bundleConfig.outputName))
// Specify the output destination
.pipe(gulp.dest(bundleConfig.dest))
.on("end", reportFinished)
);
};
return (
bundler
.bundle()
// Report compile errors
.on("error", handleErrors)
// Use vinyl-source-stream to make the
// stream gulp compatible. Specify the
// desired output filename here.
.pipe(source(bundleConfig.outputName))
// Specify the output destination
.pipe(gulp.dest(bundleConfig.dest))
.on("end", reportFinished)
);
};
if (global.isWatching) {
// Wrap with watchify and rebundle on changes
bundler = watchify(bundler);
// Rebundle on update
bundler.on("update", bundle);
}
if (global.isWatching) {
// Wrap with watchify and rebundle on changes
bundler = watchify(bundler);
// Rebundle on update
bundler.on("update", bundle);
}
var reportFinished = function () {
// Log when bundling completes
bundleLogger.end(bundleConfig.outputName);
var reportFinished = function () {
// Log when bundling completes
bundleLogger.end(bundleConfig.outputName);
if (bundleQueue) {
bundleQueue--;
if (bundleQueue === 0) {
// If queue is empty, tell gulp the task is complete.
// https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback
callback();
}
}
};
if (bundleQueue) {
bundleQueue--;
if (bundleQueue === 0) {
// If queue is empty, tell gulp the task is complete.
// https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback
callback();
}
}
};
return bundle();
};
return bundle();
};
// Start bundling with Browserify for each bundleConfig specified
config.bundleConfigs.forEach(browserifyThis);
// Start bundling with Browserify for each bundleConfig specified
config.bundleConfigs.forEach(browserifyThis);
});
```
@@ -148,16 +148,16 @@ var prettyHrtime = require("pretty-hrtime");
var startTime;
module.exports = {
start: function (filepath) {
startTime = process.hrtime();
gutil.log("Bundling", gutil.colors.green(filepath));
},
start: function (filepath) {
startTime = process.hrtime();
gutil.log("Bundling", gutil.colors.green(filepath));
},
end: function (filepath) {
var taskTime = process.hrtime(startTime);
var prettyTime = prettyHrtime(taskTime);
gutil.log("Bundled", gutil.colors.green(filepath), "in", gutil.colors.magenta(prettyTime));
},
end: function (filepath) {
var taskTime = process.hrtime(startTime);
var prettyTime = prettyHrtime(taskTime);
gutil.log("Bundled", gutil.colors.green(filepath), "in", gutil.colors.magenta(prettyTime));
},
};
```
@@ -167,18 +167,18 @@ module.exports = {
var notify = require("gulp-notify");
module.exports = function () {
var args = Array.prototype.slice.call(arguments);
var args = Array.prototype.slice.call(arguments);
// Send error to notification center with gulp-notify
notify
.onError({
title: "Compile Error",
message: "<%= error.message %>",
})
.apply(this, args);
// Send error to notification center with gulp-notify
notify
.onError({
title: "Compile Error",
message: "<%= error.message %>",
})
.apply(this, args);
// Keep gulp from hanging on to this task
this.emit("end");
// Keep gulp from hanging on to this task
this.emit("end");
};
```
@@ -216,7 +216,7 @@ Later, you import your modules and use them:
var add = require("./math").add;
exports.increment = function (val) {
return add(val, 1);
return add(val, 1);
};
```
@@ -227,7 +227,7 @@ var navigation = require("./navigation");
var triggerNavigation = document.querySelector(".toggle-navigation");
document.addEventListener("DOMContentLoaded", function () {
triggerNavigation.addEventListener("click", navigation.toggleNavigation);
triggerNavigation.addEventListener("click", navigation.toggleNavigation);
});
```
@@ -247,21 +247,21 @@ I open my `package.json` file and need to add a few lines:
```json
{
"...": "...",
"browser": {
"modernizr": "./app/_bower_components/modernizr/modernizr.js",
"jquery": "./app/_bower_components/jquery/dist/jquery.js"
},
"browserify-shim": {
"modernizr": "Modernizr",
"jquery": "$"
},
"browserify": {
"transform": ["browserify-shim"]
},
"devDependencies": {
"...": "..."
}
"...": "...",
"browser": {
"modernizr": "./app/_bower_components/modernizr/modernizr.js",
"jquery": "./app/_bower_components/jquery/dist/jquery.js"
},
"browserify-shim": {
"modernizr": "Modernizr",
"jquery": "$"
},
"browserify": {
"transform": ["browserify-shim"]
},
"devDependencies": {
"...": "..."
}
}
```
@@ -281,7 +281,7 @@ require("modernizr");
require("jquery");
$(function () {
console.log("jQuery and Modernizr loaded");
console.log("jQuery and Modernizr loaded");
});
```
@@ -292,5 +292,5 @@ You have to run `npm install` once you added a new entry to your `package.json`
This concludes the 5th part of my series, _Introduction to Gulp.js_. We learned how to use Browserify to bundle JavaScript files, how to use CommonJS modules to run Node in your Browser, and how to use non-CommonJS JavaScript files.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

14
src/content/journal/2014/gulp-tutorial-6-images-vector-fonts.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-6-images-vector-fonts
author: Stefan Imhoff
date: 2014-10-23T08:00:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to move images and generate vector fonts from SVG."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -36,10 +36,10 @@ var config = require("../../config").images;
* if not changed
*/
gulp.task("images", function () {
return gulp
.src(config.src)
.pipe(changed(config.dest)) // Ignore unchanged files
.pipe(gulp.dest(config.dest));
return gulp
.src(config.src)
.pipe(changed(config.dest)) // Ignore unchanged files
.pipe(gulp.dest(config.dest));
});
```
@@ -132,7 +132,7 @@ var config = require("../../config").copyfonts.development;
* Copy fonts to folder
*/
gulp.task("copy:fonts", ["fontcustom"], function () {
return gulp.src(config.src).pipe(gulp.dest(config.dest));
return gulp.src(config.src).pipe(gulp.dest(config.dest));
});
```
@@ -179,5 +179,5 @@ After you add the line for `fontcustom` you will have to run `bundle install` ag
This concludes the 6th part of my series, _Introduction to Gulp.js_. We learned how to move files with Gulp.js (and don’t even need a plugin for that), and how I create my vector fonts. Nothing special, but the next part will be more interesting again.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

26
src/content/journal/2014/gulp-tutorial-7-base64.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-7-base64
author: Stefan Imhoff
date: 2014-10-24T07:30:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to replace small images with base64 encoded images."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -19,13 +19,13 @@ To load the background pattern, I use SCSS like this:
```scss
%pattern-light-grey {
background-color: $background-color;
background-image: url(/assets/images/patterns/light_grey.png);
background-size: 301px 621px;
background-color: $background-color;
background-image: url(/assets/images/patterns/light_grey.png);
background-size: 301px 621px;
}
body {
@extend %pattern-light-grey;
@extend %pattern-light-grey;
}
```
@@ -33,9 +33,9 @@ The generated CSS looks like this:
```css
body {
background-color: #fdfdfd;
background-image: url(/assets/images/patterns/light_grey.png);
background-size: 301px 621px;
background-color: #fdfdfd;
background-image: url(/assets/images/patterns/light_grey.png);
background-size: 301px 621px;
}
```
@@ -43,9 +43,9 @@ After the task ran, the CSS will look like this:
```css
body {
background-color: #fdfdfd;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAloAAATaBAMAAAB4FdU7AAAA…);
background-size: 301px 621px;
background-color: #fdfdfd;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAloAAATaBAMAAAB4FdU7AAAA…);
background-size: 301px 621px;
}
```
@@ -85,7 +85,7 @@ var config = require("../../config").base64;
* Replace urls in CSS files with base64 encoded data
*/
gulp.task("base64", ["sass"], function () {
return gulp.src(config.src).pipe(base64(config.options)).pipe(gulp.dest(config.dest));
return gulp.src(config.src).pipe(base64(config.options)).pipe(gulp.dest(config.dest));
});
```
@@ -96,5 +96,5 @@ We are now finished with the development `build` task.
This concludes the 7th part of my series, _Introduction to Gulp.js_. We learned how to replace URLs to PNGs with Base64 encoded images. And we are now finished with our `build` task.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

16
src/content/journal/2014/gulp-tutorial-8-watch.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-8-watch
author: Stefan Imhoff
date: 2014-10-25T10:00:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to set up a watch task, which triggers other tasks on file changes."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -52,12 +52,12 @@ var config = require("../../config").watch;
* Start browsersync task and then watch files for changes
*/
gulp.task("watch", ["browsersync"], function () {
gulp.watch(config.jekyll, ["jekyll-rebuild"]);
gulp.watch(config.sass, ["sass", "scsslint"]);
gulp.watch(config.scripts, ["scripts", "jshint"]);
gulp.watch(config.images, ["images"]);
gulp.watch(config.svg, ["copy:fonts"]);
gulp.watch(config.sprites, ["sprites"]);
gulp.watch(config.jekyll, ["jekyll-rebuild"]);
gulp.watch(config.sass, ["sass", "scsslint"]);
gulp.watch(config.scripts, ["scripts", "jshint"]);
gulp.watch(config.images, ["images"]);
gulp.watch(config.svg, ["copy:fonts"]);
gulp.watch(config.sprites, ["sprites"]);
});
```
@@ -76,5 +76,5 @@ I miss now three tasks: `scsslint`, `jshint`, and `sprites`.
This concludes the 8th part of my series, _Introduction to Gulp.js_. We learned how to use Gulp.js to watch for changes, deletion, or creation of files and how to trigger tasks. And the best part is: This is part of the Gulp.js API. We don’t need any plugins.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>

8
src/content/journal/2014/gulp-tutorial-9-linting-scss-and-javascript.mdx
View File

@@ -4,7 +4,7 @@ slug: gulp-tutorial-9-linting-scss-and-javascript
author: Stefan Imhoff
date: 2014-10-26T08:10:00+02:00
description: "The ultimate tutorial and guide for Gulp.js: How to check the syntax of SCSS and JavaScript files."
cover: /assets/images/cover/gulp.svg
cover: /assets/images/cover/gulp.jpg
tags: ["code"]
series: gulp
---
@@ -64,7 +64,7 @@ var config = require("../../config").scsslint;
* `gem install scss-lint` needed
*/
gulp.task("scsslint", function () {
return gulp.src(config.src).pipe(scsslint(config.options));
return gulp.src(config.src).pipe(scsslint(config.options));
});
```
@@ -80,7 +80,7 @@ var config = require("../../config").jshint;
* Check JavaScript syntax with JSHint
*/
gulp.task("jshint", function () {
return gulp.src(config.src).pipe(jshint()).pipe(jshint.reporter(stylish));
return gulp.src(config.src).pipe(jshint()).pipe(jshint.reporter(stylish));
});
```
@@ -97,5 +97,5 @@ To find out which options are available, look into the documentation of [SCSS-Li
This concludes the 9th part of my series, _Introduction to Gulp.js_. Today, we learned how to use Gulp.js to check the syntax of SCSS and JavaScript files. This task will run continuously while I write my files and print out errors to my console the moment I created them.
<Figure>
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
<MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>