grunt-workflow 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
grunt-workflow 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
grunt-workflow 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
grunt-workflow 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
grunt-workflow 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 未知
开发语言 JavaScript HTML/CSS
操作系统 跨平台
软件类型 开源软件
所属分类 程序开发工作流引擎
开源组织
地区 国产
提 交 者 叶秀兰
适用人群 未知
收录时间 2014-08-25

软件简介

grunt-workflow 是一个帮助前端开发工程师简化工作的工具,它的主要功能是:

  1. webserver

  2. livereload,能保存文件的时,自动刷新浏览器.

  3. 自动编译sass

  4. 压缩图片

  5. 合并图片

  6. 添加文件注释

  7. 自动补全css3浏览器前缀

  8. 初始化项目目录结构及文件

  9. 支持ejs模板

安装相关软件

  1. 安装 nodejs window 安装地址 , mac 推荐通过brew安装brew install node

  2. 安装 grunt-cli npm install -g grunt-cli

  3. 安装 grunt-init npm install -g grunt-init

  4. 将当前git克隆到本地%USERPROFILE%\.grunt-init\(Mac平台 ~/.grunt-init/),如果没有.grunt-init目录可用mkdir .grunt-init命令创建

  5. 安装 Graphics Magick(gm),下载地址 (Mac平台 brew install GraphicsMagick)

  6. 安装 PhantomJS,下载地址 (Mac平台 brew install phantomjs)

  7. 安装 sass gem install sass

初始化新项目

  1. 在项目目录下执行 grunt-init lego (注意:项目目录要为空文件夹,不然会报错)

  2. 根据提示填写相关的内容

  3. 执行 npm install 命令下载安装相关依赖

快速在当前文件夹打开命令行

  • win7:首先按住Shift键,然后选择某文件夹后或在某文件夹中的空白处右键单击,快捷菜单中会多出“在此处打开命令窗口”,选择这个选项即可

  • Mac:安装 gotoshell

建立软链接

使用下面命令能避免每次在新项目开始前都要使用 npm install 下载相关的grunt插件

  • window: - mklink /d .\node_modules C:\Users\Administrator\Desktop\grunt_plugins\node_modules

  • mac:ln -s ~/Documents/grunt_plugins/node_modules ./node_modules (~/Documents/grunt_plugins/node_modules) 目录是存放grunt插件的文件夹

项目目录结构

└── src
    ├── _index.html
    ├── css
    │   └── lib
    ├── img
    ├── js
    │   └── lib
    ├── sass
    ├── partial
    ├── data
    └── slice
  1. html页面存放在src文件夹,支持ejs模板(见5)。

  2. css存放在 src/css 文件夹,第三方的样式库放在 src/css/lib

  3. js存放在 src/js 文件夹,第三方的样式库放在 src/js/lib

  4. src/slice 文件夹放需要合并的图片;若需要多张雪碧图,则自建子文件夹,一个子文件夹对应一张雪碧图,子文件名为雪碧图名(注意,需要替换雪碧图的css文件,切片使用background-image属性来引入,不使用background属性引入。)

  5. ejs模板片段放在src/partial文件夹,模板数据放在src/data文件夹。配置数据统一在src/data/config.json指定(注意:没有配置的html页面不参与ejs渲染)。

注意:src/css/lib 和 src/js/lib 里的文件是不会被压缩的。

任务

项目安装好了相关的配置就可以在命令行下使用grunt任务

grunt

默认打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译

grunt port:端口号

指定端口打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译

grunt release

生成发布文件,执行gunt release生成一个dest的目录,检测样式文件里的本地资源引用,如果有无效引用则中断任务,否则执行后续任务:编译html,压缩css、js文件,自动生成sprit图片,替换css样式里的链接。dest里的文件是发布使用的。

grunt dest

打开一个webserver,显示dest目录

grunt assets:提交注释

提交dest里面的静态文件(css、js、img)到静态文件服务器,提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>,详见注意事项。

grunt zip

打包src和dest文件给技术。其中dest文件夹作如下处理:将 dest/*.html相对路径的静态资源 引用替换为线上路径;若不需替换,资源路径换成 绝对路径

该命令在grunt release后执行,线上路径由 包描述文件(见注意事项) 指定。dest里的静态资源可通过grunt assets或手动上传到assets服务器。

可选配置

配置文件: ~/.grunt-init/config.json

  • IS_EXEC_CUSTOM_CMD 是否启用初始化时执行默认命令,默认不启动。

  • LINK_SRC_NODE_MODULES 建立node_modules软链接的源路径。(建议mac用户指定到~/.node_modules, win用户指定到%USERPROFILE%\.node_modules)

  • OPEN_APP 初始化目录后启动APP打开当前项目。

注意事项

  • 提交到 svn-work 时(需手动提交),只上传配置文件 Gruntfile.jspackage.json 和源码文件夹 src/ 即可

  • 提交到 svn-assets 时,需

    说明:svn-assets提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>,对应线上路径为 http://assets.dwstatic.com/<description>/<name>/<version>

    • description,项目类型,取值:project、game、special

    • name,项目名,不要出现中文字符

    • version,项目版本,默认值:1.0.0

    1. 修改模板文件~/.grunt-init/lego/root/Gruntfile.js里面push_svn任务的用户信息

    2. grunt-init lego时注意以下字段的填写,或者在初始化后的 package.json 中修改对应字段


展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2014/07/17 17:31

Grunt的测试插件:grunt-mocha-test,grunt-blanket

在Grunt中使用grunt-mocha-test,grunt-blanket

0
0
发表了博客
2013/04/13 16:50

Grunt

1. what is Grunt The JavaScript Task Runner . 2.Getting started Grunt and gruntplugins are installed and managed via npm ,the Node.js package manager. 2.1 Installing the CLI if you have installed Grunt globally in the past ,you will need to remove it first: npm uninstall -g grunt 我的机器上之前未...

0
0
发表了博客
2017/03/14 03:51

grunt

npm install -g grunt-cli //全局安装grunt npm init -y //初始化package.json npm install grunt --save-dev //在项目中安装grunt grunt --help //查看更多信息 grunt 安装完毕 新建Gruntfile.js 随便举得例子1......

0
0
发表于大前端专区
2014/11/05 17:57

Grunt

>md TestGrunt >npm init 输入初始化相关参数 > npm install grunt --save-dev 安装并加入dependencies中 >npm install grunt-contrib-less --save-dev >npm install grunt-contrib-aglify --save-dev >npm install grunt-contrib-concat --save-dev >npm install grunt-contrib-clean --save-dev module.exports = f...

0
0
发表于大前端专区
2014/11/05 17:35

Grunt

x

0
0
发表于大前端专区
2014/12/31 09:31

grunt

部署工具 , 暂且就用以下的网址吧,好好学学

0
0
发表于大前端专区
2016/03/10 16:37

Grunt学习笔记(从零配置grunt)

关于grunt的学习笔记,grunt的简单介绍,以及grunt的每一个task的作用

0
2
发表于大前端专区
2016/01/29 11:31

grunt安装

node 下载地址: https://nodejs.org/download/release/latest/ Grunt和Grunt插件都是通过npm, Node.js包管理器安装和管理的. a. 安装node,下载地址https://nodejs.org/dist/v4.2.6/node-v4.2.6-x64.msi b. 全局安装grunt 命令:npm install grunt -g c. 安装grunt-cli,命令:npm install grunt-cli -g d. 安装 grunt-...

0
2
发表于大前端专区
2014/11/16 00:02

bower && grunt

bower init grunt init bower install jquery --save grunt install grunt-contrib-copy --save grunt install grunt-contrib-clear --save bower install npm install...

0
0
发表了博客
2015/12/15 16:53

grunt安装

随着node的流行,各种后台的技术应用到前端,依赖注入、自动化测试、构建等等。 本篇就介绍下如何使用Grunt进行构建。 grunt安装   由于grunt依赖于nodejs,因此需要先安装nodejs。而安装grunt又需要使用npm包管理器。   因此可以使用node -v 和 npm -v来测试是否安装。   使用npm命令安装grunt-cli,这是一款grunt...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
8 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部