/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(Q8)(or 64bit) & Phantomjs
  3. At last unpack them into any of your folder 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