/f2e-workflow

A f2e project workflow based on Yeoman, Grunt and Bower.

Primary LanguageJavaScriptMIT LicenseMIT

f2e-workflow GitHub version devDependency Status

f2e-workflow is a cross-platform, efficient, smooth workflow for F2E project based on Grunt.

中文说明文档(zh_CN) 见此

###Table of contents

Quick Start

4 quick start options are available:

Read the Getting Started page and wiki list for more.

What's included

Within the download you'll find the following directories and files, you'll see something like this:

f2e-workflow/
│
├── package.json                // Project dependance
├── Gruntfile.js                // Grunt task config
├── .ftppass                    // FTP passwork(optional): grunt-ftp-deploy
│
├── node_modules                  // `npm install` generate package
│
├── html/                         // HTML files
│   └── index.html
├── css/                        // CSS source files(e.g., `Less`/`Sass`)
│   ├── lib-reset.less
│   ├── lib-mixins.less
│   └── style.less
├── img/                        // Images source [non-sprite] e.g, logo
│   ├── logo.png
│   └── background.png
├── slice/                      // Slice images source [Tobe-Sprite] e.g, Icons
│   ├── icon-github.png
│   ├── icon-github@2x.png      // Include 1x & 2x images
│   ├── icon-twitter.png
│   └── icon-twitter@2x.png
└── publish/                    // The target folder, The final F2E output
    ├── css/                    // The final CSS
    │   └── style.css
    ├── img/                    // just copy from `../img/`
    │   ├── logo.png
    │   └── background.png
    └── sprite/                 // Sprited automatically
        └── demo.png

After run f2e-workflow, you'll get ../publish which is the final output.

System Environment

Mac OS

  1. Recommended: install Node.js with Brew If not installed HowTo

  2. Required: install Grunt CLI and Grunt

  3. Install those two requirements via

     // install GraphicsMagick library
 // `Xcode Command Line Tools` may be needed, please agree.
 brew install GraphicsMagick
 
 // install Phantomjs library
 brew install phantomjs
 
 // re-install node_modules, e.g. `gm`
 npm install

  4. Run gm version & phantomjs --version to test if your environment is OK.

Windows

  1. Install Node.js If not installed
  2. Download, then Install GraphicsMagick & Phantomjs
  3. At last Set system variable

Both

  1. After install GraphicsMagick and Phantomjs successfully, run npm install to pull the dependance package.

Documentation

A full f2e-workflow include those Tasks below:

  • Compile Less/Sass to CSS
  • CSS Lint
  • CSS compression
  • Auto merge sprite images
  • Auto fit @2x retina images
  • Add timestamp after CSS files
  • Watch files changes
  • FTP deploy
  • ZIP package

Task Details

1. Default workflow grunt

grunt.registerTask('default', ['less:dev', 'copy:dev', 'clean:dev', 'watch']);
Output folder: ../publish/(css/ + img/ + slice/)

Note: Only do Less/Sass -> CSS

2. Full workflow grunt all

Output folder: ../publish/(css/ + img/ + sprite/)
Note: Include Less/Sass Compile+Compression+Sprite+PNGmin(under ./img/ & ./sprite/), without file watch

3. Debug workflow grunt debug

Output folder: ../publish/(css/ + img/ + sprite/)
Note: Same as grunt all, but will not delete tmp/ folder, this is only for debug use(with file watch task inside)

4. FTP deploy workflow grunt push

Note: grunt push will push all the output to FTP server

5. ZIP package grunt zip

Note: grunt zip will package all the output files into .zip file

Rename init grunt sprite-cssmin

Note: copy files from slice/ to -> sprite -> CSS compression

Rename init grunt 2x2x

Note: @2x image to @1x image

Demo

Command line demo is below,

Demo

Demo Page without Sprite Task: /demo-without-sprite/html/index.html
After the workflow，check Demo Page /demo/html/index.html for sprite image source code.

Know Issues

  • Images diff under Mac OS & Win is known from this [#issues]
  • No sprite task when you are doing a debug workflow, just run grunt debug if needed.

License

Released under MIT LICENSE

Bitdeli Badge