Simple Gulp Workflow - Uses Gulp, Gridzilla, Sass, PostCSS, Uglify, Imagemin and...
source link: https://www.tuicool.com/articles/hit/7RVny2A
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Basic Gulp File
Use Sass, Gridzilla, PostCss, Uglify, Livereload and Imagemin with your project.
No bulky frameworks or templating engines, just simple stuff for small projects, or as a starting point for writing your own.
Getting Started
You'll need to install Node.js, and then $ npm install gulp -g
from the command line.
$ npm install
You can view the documentation for Gridzilla here https://teefouad.github.io/gridzilla/
Commands
gulp
Default task will run the build. Compiles all Sass, Compresses/Uglifies Javascript and compresses images. Outputs to a 'dist' folder.
gulp watch
Watches Sass files and JS files, compiles/compresses on the fly.
Auto-reloads browser.
gulp image
Run imagemin and compress images. Outputs to a 'dist' folder.
gulp styles
Builds using compass or Sass, Compass set as default for now. When using Compass, you can use this instead of your config.rb just set your Compass options and requires in the compass() pipe. Using it with config.rb is recommended for the http path.
Make sure your css: and sass: directories are correct :smiley_cat:
Livereload on Watch and Styles tasks
Will auto reload with Livereload. If there are issues check for port conflicts. You must have the livereload browser extension installed for this.
Live Reload Chrome Browser Extestion
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK