Hack to enable source maps in with gulp-sourcemaps and autoprefixer.

100%

Hack to enable source maps in with gulp-sourcemaps and autoprefixer.

✓ Published0🌍 Public

Last edited Aug 12, 2014

Created on Aug 12, 2014

This example demonstrates a custom Gulp plugin that enables source maps when using Autoprefixer with gulp-sourcemaps. The code defines a module that processes CSS files through the `autoprefixer` library, updates the file contents with prefixed CSS, and applies the resulting map via `vinyl-sourcemaps-apply`. It integrates with `through2` for stream handling and is designed for use within a Gulp task where sourcemaps are initialized and written. The gist shows the complete function, including error handling for streams and null files.

AI-generated description

Similar vizzes

Loading thumbnail…

Simple babel livereload

This example demonstrates a live-reloading development workflow for transpiling JavaScript and serving a web page. The gulpfile defines tasks to convert ES6 source files with Babel, bundle the resulting JavaScript with Browserify, and automatically refresh the browser via `gulp-livereload` whenever source files change. It also sets up a local HTTP server using the `st` library to serve static files on port 8080, integrating all these steps into a single default Gulp task. The visualization shows how build tools can be orchestrated for rapid iteration, but no actual data or graphical output is involved—the code is purely a build configuration.

MMcNull

60% match

Loading thumbnail…

Converts Bulma CSS framework from SASS to SCSS

This example converts the Bulma CSS framework from SASS syntax to SCSS using a custom Gulp pipeline. It shows how `gulp.src` selects both root and nested `.sass` and `.scss` files from `node_modules/bulma`, then pipes them through the `sass-convert` converter with `from: 'sass'` and `to: 'scss'` options. The `gulp-replace` plugin rewrites any `.sass"` file-path references to `.scss"` in the source files, and a separate `gulp-sass` task compiles the converted `bulma.scss` to CSS. The gist demonstrates automating framework migration and recompilation with Node.js tooling.

LLucyI

60% match

Loading thumbnail…

Gist 467901440093a9904541

This example demonstrates a Gulp task that automates the generation of critical CSS for a WordPress theme. It shows the process of downloading a remote stylesheet, analyzing its rules, and extracting only the styles needed for above-the-fold rendering of a specific page. The task uses the `request` library to fetch the CSS file, `criticalcss` to parse and evaluate the rules against the target URL, and the Node.js `fs` module to write the resulting critical CSS to a local file.

GGolodhros

59% match

Loading thumbnail…

Gist 0026d46aee766aec1655be453b27d90b

This example shows a gulp task for deploying static website files to a remote FTP server. It uses `vinyl-ftp` to create an FTP connection and `gulp-util` for logging, then streams files from a local `dist` directory using `gulp.src`. The task filters uploads with `conn.newer` to only transfer files newer than those on the server, and writes them to `/public/www/` via `conn.dest`. The visible code does not include any data visualization, instead focusing on automated deployment workflow.

SSamuelRiversMoore

54% match

Loading thumbnail…

Gist c85dd820e20ad40ed05f07b3ea0eb4a8

This example shows a Gulp task that creates a timestamped backup of an Angular project directory. It uses `gulp.src` to copy all project files except `node_modules` into a new folder named after the current directory and the current time, formatted with a custom `dateFormat` utility. The task accepts an optional `m` argument via `minimist` to append a message to the backup folder name. The code demonstrates file-watching and build automation with Gulp’s task system and path handling through `path.parse`.

OOhtsu

54% match

Loading thumbnail…

Generated by SassMeister.com.

This example demonstrates a Sass mixin and map system that dynamically generates utility classes for spacing and colors, then applies them to a single `.element` via a custom `apply-mixin` function. It shows how `map.set`, `unique-id`, and `@extend` are used to create modular, reusable CSS without hardcoding selectors. The code defines mixins like `define-mixin` for padding, margin, text color, and background color, pulling values from a `$tokens` map. The output CSS shows the compiled rules for `.element`, which uses the generated utilities. The source is a SCSS file processed by Dart Sass, with no JavaScript or external data.

HHypercubed

54% match

Loading thumbnail…

Gist e9ca6a4ec4fe6c3bee98

This example shows how a JavaScript module with reserved-word property names—specifically `await`—triggers a parsing error during Rollup’s build pipeline, while the same names work in object literals. The code includes an `index.js` file defining an exported object with methods named `await` and `add`, and a `rollup.config.js` that applies the `rollup-plugin-babel` with the `es2015-rollup` preset via `.babelrc`. The visualization highlights the exact source-map error location from Rollup’s parser, contrasting valid syntax with the failing line. It uses Rollup’s plugin system and Babel’s preset configuration to demonstrate the issue.

HHypercubed

53% match

Loading thumbnail…

Gist 1b1889baaec2adffe574

This example demonstrates a WordPress theme’s strategy for optimizing CSS delivery by inlining critical styles and asynchronously loading the full stylesheet. It shows how PHP hooks like `wp_head` and `wp_footer` conditionally inject scripts, styles, and a cookie-based cache check. The code uses `file_get_contents` to embed JavaScript files such as `loadCSS.js` and `onloadCSS.js`, alongside a `<style>` block for critical CSS. A `noscript` fallback ensures the full stylesheet loads without JavaScript. The implementation relies on the `Roots\Sage\Assets` namespace and functions like `asset_path()` to resolve file paths.

GGolodhros

52% match