โ This project is now archived. The dependencies are very out-of-date - proceed with caution! โ
Quick-start project for rapid prototyping in the browser, using node, gulp, and Ruby (for Sass compilation).
I wanted to create a starting point for new web projects. It makes designing in the browser a lot smoother by watching my source files and automatically reloading the browser when they change. Sass files are compiled into CSS (it includes my preferred normalize/reset CSS as a partial) and JavaScript files are concatenated to minimise browser requests. Both CSS and JS files are linted to avoid errors and keep code consistent and clean. Finally and optionally, it'll generate an optimised version of the site with minimised CSS and JS, and optimised image files.
- Generates CSS from Sass files, with sourcemaps and linting
- Concatenates JavaScript files, with sourcemaps and linting
- Watches files for changes and automatically reloads the browser
- Uses modular gulp tasks with config file for easy customisation of the build process
- Optionally, get the site ready for deployment with CSS and JS minification and image optimisation
- Ruby. Tested with version 2.2.4. I suggest using RubyInstaller on Windows (make sure to check the option to add Ruby executables to your PATH).
- Node.js Tested with version 0.12.5. On Windows, make sure you choose the option to add to PATH.
- LiveReload browser extension for Chrome, Firefox and Safari
Open a new command line window and enter the following:
ruby -v
node -v
npm -v
If Ruby, Node and the node package manager are installed correctly, you'll get version numbers for each.
On Windows, do this as an administrator. I also recommend ConEmu as a much-improved upgrade from the built-in cmd.
gem install bundler
- installs Bundler, which lets you manage Ruby gemsbundle install
- uses Bundler to quickly install all of the Ruby dependencies as defined in theGemfile
- here, thesass
andscss_lint
gemsnpm install gulp -g
- uses the node package manager to globally install gulp on your machine - a requirement for running gulp locallynpm install
- uses the node package manager to install all of our gulp project dependencies, as defined inpackage.json
Type gulp
into your command line.
This is the default development task. It will do the following:
- delete the existing
build/development
directory - start watching files in the
src
directory for changes - start Browsersync
- copy html/htm/xml/json/txt files anywhere in
src
tobuild/development
- compile Sass files in
src/scss
intobuild/development/css/main.css
, add vendor prefixes for older browsers, generate a source map, and lint - concatenate JavaScript files in
src/js
intobuild/development/js/scripts.js
, generate a source map, and lint - copy image files anywhere in
src
intobuild/development
- launch a new browser window and serve
index.html
athttp://localhost:9999
Now that it's watching your src
directory, any changes to files therein will automatically reload your browser window, which is ideal for efficient development.
To quit the process and stop watching files, hit CTRL-C
(CMD-C
on a Mac) twice.
Type gulp publish
into your command line.
This is the publish task. It will do the following:
- delete the existing
build/production
directory - copy any html/htm/xml/json/txt files from
src
tobuild/production
- compile Sass files in
src/scss
intobuild/production/css/main.css
, add vendor prefixes for older browsers, generate a source map, and minify - concatenate JavaScript files in
src/js
intobuild/production/js/scripts.js
, generate a source map, and minify - copy image files anywhere in
src
intobuild/production
and optimise them for web
The process will then end and you will be left with an optimised site in build/production
. It doesn't watch files or lint your CSS/JS, as I assume this is done during the development process.