diff --git a/public/assets/images/cover/git.jpg b/public/assets/images/cover/git.jpg new file mode 100644 index 0000000..3dfefbb Binary files /dev/null and b/public/assets/images/cover/git.jpg differ diff --git a/public/assets/images/cover/gulp.jpg b/public/assets/images/cover/gulp.jpg new file mode 100644 index 0000000..98433b6 Binary files /dev/null and b/public/assets/images/cover/gulp.jpg differ diff --git a/public/assets/images/cover/gulp.svg b/public/assets/images/cover/gulp.svg deleted file mode 100644 index fa73fe9..0000000 --- a/public/assets/images/cover/gulp.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/content/journal/2009/git.mdx b/src/content/journal/2009/git.mdx index f9c600a..e9690eb 100644 --- a/src/content/journal/2009/git.mdx +++ b/src/content/journal/2009/git.mdx @@ -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"] --- diff --git a/src/content/journal/2014/gulp-tutorial-1-intro-setup.mdx b/src/content/journal/2014/gulp-tutorial-1-intro-setup.mdx index 923f76d..ff4e27c 100644 --- a/src/content/journal/2014/gulp-tutorial-1-intro-setup.mdx +++ b/src/content/journal/2014/gulp-tutorial-1-intro-setup.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-10-generating-sprites.mdx b/src/content/journal/2014/gulp-tutorial-10-generating-sprites.mdx index be1c818..ef5cb58 100644 --- a/src/content/journal/2014/gulp-tutorial-10-generating-sprites.mdx +++ b/src/content/journal/2014/gulp-tutorial-10-generating-sprites.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-11-production-build-server-and-jekyll.mdx b/src/content/journal/2014/gulp-tutorial-11-production-build-server-and-jekyll.mdx index 11b420a..7bd5677 100644 --- a/src/content/journal/2014/gulp-tutorial-11-production-build-server-and-jekyll.mdx +++ b/src/content/journal/2014/gulp-tutorial-11-production-build-server-and-jekyll.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html.mdx b/src/content/journal/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html.mdx index a539ad9..0077b88 100644 --- a/src/content/journal/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html.mdx +++ b/src/content/journal/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-13-revisioning.mdx b/src/content/journal/2014/gulp-tutorial-13-revisioning.mdx index c095b53..9417d65 100644 --- a/src/content/journal/2014/gulp-tutorial-13-revisioning.mdx +++ b/src/content/journal/2014/gulp-tutorial-13-revisioning.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-14-deploying-the-website.mdx b/src/content/journal/2014/gulp-tutorial-14-deploying-the-website.mdx index d7d1cd9..5abce70 100644 --- a/src/content/journal/2014/gulp-tutorial-14-deploying-the-website.mdx +++ b/src/content/journal/2014/gulp-tutorial-14-deploying-the-website.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-15-performance-improvements-webp-gzip.mdx b/src/content/journal/2014/gulp-tutorial-15-performance-improvements-webp-gzip.mdx index 1b1d921..a39c122 100644 --- a/src/content/journal/2014/gulp-tutorial-15-performance-improvements-webp-gzip.mdx +++ b/src/content/journal/2014/gulp-tutorial-15-performance-improvements-webp-gzip.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-16-postcss.mdx b/src/content/journal/2014/gulp-tutorial-16-postcss.mdx index 6301c6a..7687f08 100644 --- a/src/content/journal/2014/gulp-tutorial-16-postcss.mdx +++ b/src/content/journal/2014/gulp-tutorial-16-postcss.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-2-development-server-browsersync-configuration.mdx b/src/content/journal/2014/gulp-tutorial-2-development-server-browsersync-configuration.mdx index 52db56c..4873723 100644 --- a/src/content/journal/2014/gulp-tutorial-2-development-server-browsersync-configuration.mdx +++ b/src/content/journal/2014/gulp-tutorial-2-development-server-browsersync-configuration.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-3-build-clean-jekyll.mdx b/src/content/journal/2014/gulp-tutorial-3-build-clean-jekyll.mdx index 75a0af3..9f8162f 100644 --- a/src/content/journal/2014/gulp-tutorial-3-build-clean-jekyll.mdx +++ b/src/content/journal/2014/gulp-tutorial-3-build-clean-jekyll.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx b/src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx index 92ef6ae..d670631 100644 --- a/src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx +++ b/src/content/journal/2014/gulp-tutorial-4-css-generation-sass.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-5-javascripts-browserify.mdx b/src/content/journal/2014/gulp-tutorial-5-javascripts-browserify.mdx index b66edc7..c2a9493 100644 --- a/src/content/journal/2014/gulp-tutorial-5-javascripts-browserify.mdx +++ b/src/content/journal/2014/gulp-tutorial-5-javascripts-browserify.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-6-images-vector-fonts.mdx b/src/content/journal/2014/gulp-tutorial-6-images-vector-fonts.mdx index a37fbc7..ad47ca3 100644 --- a/src/content/journal/2014/gulp-tutorial-6-images-vector-fonts.mdx +++ b/src/content/journal/2014/gulp-tutorial-6-images-vector-fonts.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-7-base64.mdx b/src/content/journal/2014/gulp-tutorial-7-base64.mdx index 68c48bb..2e24470 100644 --- a/src/content/journal/2014/gulp-tutorial-7-base64.mdx +++ b/src/content/journal/2014/gulp-tutorial-7-base64.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-8-watch.mdx b/src/content/journal/2014/gulp-tutorial-8-watch.mdx index 40e5bb0..e014f7a 100644 --- a/src/content/journal/2014/gulp-tutorial-8-watch.mdx +++ b/src/content/journal/2014/gulp-tutorial-8-watch.mdx @@ -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.
- +
diff --git a/src/content/journal/2014/gulp-tutorial-9-linting-scss-and-javascript.mdx b/src/content/journal/2014/gulp-tutorial-9-linting-scss-and-javascript.mdx index ff6ff64..39eddc5 100644 --- a/src/content/journal/2014/gulp-tutorial-9-linting-scss-and-javascript.mdx +++ b/src/content/journal/2014/gulp-tutorial-9-linting-scss-and-javascript.mdx @@ -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.
- +