chlts / f2e-workflow Goto Github PK

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

中文说明文档(zh_CN) 见此

###Table of contents

• Quick start
• What's included
• System Environment
• Documentation
• Task Details
• Demo
• Know Issues
• License

4 quick start options are available:

• Download the latest release.
• Clone the repo: git clone [email protected]:hzlzh/f2e-workflow.git
• Install with yeoman or custom it according to repo: generator-f2e :
  • npm install -g generator-f2e
  • yo f2e
• Install with Bower: bower install f2e

Read the Getting Started page and wiki list for more.

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
│   ├── [email protected]      // Include 1x & 2x images
│   ├── icon-twitter.png
│   └── [email protected]
└── 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.

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.

1. Install Node.js If not installed
2. Download, then Install GraphicsMagick(Q8)(or 64bit) & Phantomjs
   • Install
   • Download Mirror: GraphicsMagick-1.3.20-Q8-win32-dll.zip
   • Download Mirror: phantomjs-1.9.7-windows.zip
3. At last unpack them into any of your folder Set system variable

1. After install GraphicsMagick and Phantomjs successfully, run npm install to pull the dependance package.
   • If you get some network trouble, you can download node_modules.zip instead.

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

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

Note: Only do Less/Sass -> CSS

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

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)

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

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

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

Note: @2x image to @1x image

Command line demo is below,

• Also a GUI tools is ready, check: Mobile-Team / spock
• WebStorm 8 is ready for Yo & Grunt: WebStorm 8.0 Release Candidate

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.

• 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.

Released under MIT LICENSE