zoukankan      html  css  js  c++  java
  • Grunt 认识

    基本工作流:

    JS合并、JS压缩、CSS压缩、CSS Sprite、图片优化、测试、静态资源缓存(版本更新)...

    基于工作流产生的工具:

    JSHint(jshint.com)、CSSLint(csslint.net)、jade(jade.tilab.com)、coffeeScript(coffee-script.org/)、requireJs/seaJs、compass/less/sass ...

    Grunt就是解决各种工具组合而形成系统工作流的解决方案

    安装

    nodeJs --> npm --> grunt --> package.json --> 安装插件Grunt相关插件 --> Gruntfile.js

    nodeJs : 可使用homeBrew安装,也可以官网安装 brew install node(附带npm)

    grunt : npm install -g grunt-cli(卸载:npm uninstall grunt)

    package.json : 用于nodeJs包管理(比如grunt插件安装管理) npm init 开始填写项目名称、版本号、git信息、作者等信息

    安装grunt相关插件 : 合并文件(grunt-contrib-contact)、语法检查(grunt-contrib-jshint)、Sass编译(grunt-contrib-sass)、压缩js文件(grunt-contrib-uglify)、监听文件变化(grunt-contrib-watch)、建立本地服务器(grunt-contrib-connect)

    安装grunt到项目命令 : npm install grunt --save-dev(npm install grunt表示安装到当前项目,--save-dev表示安装grunt信息添加至package.json中,在package.json显示为"devDenpendencies" : {"grunt" : "^1.0.0"}表示当前项目依赖grunt,版本为1.0.0)

    安装grunt相关插件到项目命令 : npm install --save-dev grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect表示把相关插件到项目中,一个插件对应一个任务

    配置

    Gruntfile.js : 配置Gruntfile.js,写入任务

    任务:Mulit Tasks( grunt.initConfig({key : value})  ) 和 Baisc Tasks

    配置Gruntfile.js语法 : 所有的代码包裹在 module.exports = function (grunt) { ... };里面的代码主要分为:任务配置(也可不必要,比如Baisc Tasks)、插件加载、任务注册。实现:用grunt注册一个任务从而更具根据任务配置调用加载的插件来执行相应的操作

    Mulit Tasks : 有所谓的target 且每个Mulit Task都必须有一个task 如 : grunt.initConfig({concat : {foo : { ... }, bar : { ... }}, uglify : {bar : {}}})  concat任务有foo和bar两个target,而uglify只有一个target,target名字可以更换(但是任务的名称是固定的,比如concat对应相关的插件),现在运行grunt concat:foo或grunt concat:bar分别表示运行foo或bar指定的的concat任务 只运行grunt concat将会遍历concat的targets按顺序运行

    Baisc Tasks : 直接注册任务 grunt.register(taskName,taskFunction) 如 : grunt.register("foo", function (arg1, arg2) { ... }) 运行grunt foo 或者 grunt foo:a:b a和b是传递给foo的参数

    任务配置 : 调用插件配置要执行的任务和实现的功能

    Baisc Tasks : 不需要任务配置

    插件加载 : 加载所需的插件 grunt.loadNpmTasks()

    任务注册 : 注册一个任务,包含之前的任务配置代码 grunt.registerTasks()

  • 相关阅读:
    变量
    注释 & 缩进
    【oracle】生成AWR报告
    【Linux】awk指令
    rhel7.0替换centos yum源
    如何在乌班图上配置java开发环境
    如何在乌版图系统添加拼音输入法!
    如何让虚拟机中乌版图系统变大?
    如何重置虚拟机的乌版图系统的密码?
    虚拟机三种网络模式配置
  • 原文地址:https://www.cnblogs.com/bsj2016/p/5460016.html
Copyright © 2011-2022 走看看