Gist 7880143

100%

✓ Published0🌍 Public

Last edited Dec 6, 2013

Created on Dec 9, 2013

This example demonstrates a minimal client-side build setup for a web application, showing how Less styles and browser JavaScript are compiled into static bundles. The code uses `catw` with `lessc` to transform `.less` files from `style/` into `static/bundle.css`, and `browserify` to bundle browser code from `browser/` into `static/bundle.js`. A watch mode via `watchify` and `catw` enables live recompilation during development, while a production build generates the final static assets. The example also illustrates npm script orchestration for both watch and build workflows.

AI-generated description

Similar vizzes

Loading thumbnail…

bundle/index.html for webpack-es6-boilerplate

This example shows a minimal webpack setup for an ES6 project, producing a single-page HTML document that loads a compiled JavaScript bundle. The page contains no visible content or user interface, only an empty body with a script tag referencing `bundle.js`. The code demonstrates the entry-point plumbing of a webpack-built application, where the frontend relies entirely on the bundled output for any rendering or behavior. The files include the `index.html` shell and the webpack configuration source, indicating how a boilerplate project connects its build system to a basic HTML host page.

115Dkatz

66% match

Loading thumbnail…

Gist bae3b305134e90c96401e1f54a8c23e3

This example shows a serverless webpack configuration for deploying a Node.js application. It demonstrates how to bundle JavaScript code with the Serverless Webpack plugin, targeting AWS Lambda’s Node runtime. The configuration uses `serverless-webpack` to generate entry points, sets the build mode based on local development, and applies `webpack-node-externals` to exclude Node modules. It also ignores the `/opt` directory and outputs CommonJS2 bundles to the `.webpack` folder, with source maps for debugging.

Aandresmijares

65% match

Loading thumbnail…

less cached for Lighttpd

This example demonstrates a caching mechanism for compiling Less stylesheets into CSS on a web server using Lighttpd. The shell script stores compiled output in `/tmp` based on a SHA512 hash of the source file, so subsequent requests reuse the cached version. It runs `lessc` with the `--clean-css` option to minify the result, and integrates with Lighttpd’s CGI module via `cgi.assign` to handle `.less` files. The script prints a comment indicating the compilation took time, but only computes that duration when the cache is built, showing the performance benefit of avoiding recompilation.

HHoffmannP

65% match

Loading thumbnail…

gulp for es6 -> all-browser-friendly

This example demonstrates a Gulp workflow that compiles ES6 JavaScript into browser-compatible ES5 code. It uses `gulp.src` to read input files from the `dev` directory, then applies `gulp-sourcemaps` initialization, `gulp-plumber` for error handling, and `gulp-babel` with the `es2015` preset to transpile the code. The processed files are concatenated into `bundle.min.js`, with sourcemaps written, and output to the project root via `gulp.dest`. The task depends on a prior `clean:js` task to remove old builds.

Aamazingandyyy

64% match

Loading thumbnail…

Typescript npm

This example demonstrates a minimal TypeScript project configured for Node.js development, showing how npm scripts and a tsconfig.json file structure a build pipeline. It uses the TypeScript compiler (via `npx tsc`) to transpile ES5-targeted CommonJS modules from `src` to `dist`, with strict type-checking and `noImplicitAny` enabled. The package.json declares dependencies like `typescript`, `ts-node`, and `nodemon`, and the scripts include `build`, `prestart`, `start`, and `dev` to compile and run the code, while `tsconfig.json` sets `rootDir`, `outDir`, and `esModuleInterop` for module resolution.

TTomStanczyk

63% match

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

63% match

Loading thumbnail…

Gist 11442448

This example shows a Gruntfile configuration that automates JavaScript build tasks using webpack, JSHint, and Mocha. It defines a webpack task with entry point `src/entry.js`, outputting a UMD bundle named `WithGrunt` to `lib/bundle.js`, and includes module resolution for `node_modules` and `bower_components`. The configuration also sets up JSHint linting for source and test files, a Mocha test runner with a spec reporter, and a watch task for continuous linting and testing. The default task chains these steps together, demonstrating a complete build pipeline for a modular JavaScript project.

Aakollegger

63% 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

63% match