0.简介

　　grunt是一个任务自动运行器。简单来讲，用了以后，再也不用每次修改sass后，去生成下css,也再也不用去一遍遍压缩js了 ，也再也不用修改了点点东西就要去刷新页面，也不需要去复杂地建立一个本地服务了，你只要在Gruntfile.js里面写好任务，这一切grunt都帮你解决了。（grunt的主要功能在3里面有写）

1.安装(首先确保你安装了nodejs)

sudo npm install -g grunt-cli

2.进入到你得操作文件夹（比如 ／grunt／demo）,然后执行

npm init

一路回车后（当然可以慢慢填写），会生成一个package.json文件，如下

3.安装grunt所需要的插件

　　a.需要实现功能：

　　（1）合并文件 ： grunt-contrib-concat

　　（2）语法检查 : grunt-contrib-jshint

　　（3）sass编译 : grunt-contrib-sass

　　（4）压缩文件 : grunt-contrib-ugligy

　　  (5) 建立本地服务器 : grunt-contrib-connect

　　（6）监听文件变动 : grunt-contrib-watch

　　b. 安装这些插件

// --save-dev 参数会将安装的文件自动标记到package.json里面
// 先安装这些插件的依赖grunt
npm install grunt --save-dev 
// 然后安装这些插件
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

安装好以后，我们可以看到demo的文件夹下node_modules多了我们安装的插件包；而package.json里面也记录下了我们的安装文件

      

4.实例一下

　　（1）新建一个Gruntfile.js 完成 sass的自动生成，js的语法检查、合并成一个文件、压缩，然后监听文件变化，并建立本地的服务器

　　（2）目录，依次为红色（我们自己写的文件）；蓝色（编译或者合并后的结果）；黄色（压缩后的结果）

　　

　　（3）源码

　　Gruntfile.js

module.exports = function(grunt) {

  var sassStyle = 'expanded';

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    // 自动将 ./scss/style.scss 生成 ./style.css

    sass: {

      output : {

        options: {

          style: sassStyle

        },

        files: {

          './style.css': './scss/style.scss'

        }

      }

    },

    // 自动将 ./src/plugin.js 和 ./src/plugin2.js 合并成 ./global.js

    concat: {

      dist: {

        src: ['./src/plugin.js', './src/plugin2.js'],

        dest: './global.js',

      },

    },

    uglify: {

      compressjs: {

        files: {

          './global.min.js': ['./global.js']

        }

      }

    },

    jshint: {

      all: ['./global.js']

    },

    watch: {

      scripts: {

        files: ['./src/plugin.js','./src/plugin2.js'],

        tasks: ['concat','jshint','uglify']

      },

      sass: {

        files: ['./scss/style.scss'],

        tasks: ['sass']

      },

      livereload: {

          options: {

              livereload: '<%= connect.options.livereload %>'

          },

          files: [

              'index.html',

              'style.css',

              'global.min.js'

          ]

      }

    },

    connect: {

      options: {

          port: 9000,

          open: true,

          livereload: 35729,

          hostname: 'localhost'

      },

      server: {

        options: {

          port: 9001,

          base: './'

        }

      }

    }

  });

  // sass编译

  grunt.loadNpmTasks('grunt-contrib-sass');

  // 合并文件

  grunt.loadNpmTasks('grunt-contrib-concat');

  // 语法检查

  grunt.loadNpmTasks('grunt-contrib-jshint');

  // 压缩文件

  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 监听文件变动

  grunt.loadNpmTasks('grunt-contrib-watch');

  // 建立本地服务器

  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('outputcss',['sass']);

  grunt.registerTask('concatjs',['concat']);

  grunt.registerTask('compressjs',['concat','jshint','uglify']);

  grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']);

  grunt.registerTask('default');

};

　　index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">

    <script src="global.min.js" charset="utf-8"></script>

  </head>

  <body>

    <a href="#">HELLO GRUNT BY CYNTHIA</a>

  </body>

</html>

　　

　　style.scss

*{

  padding: 0;

  margin: 0;

  border: 0;

  outline: 0;

  font-size: 12px;

}

body{

  background: #f4f4f4

}

a{

  text-decoration: none;

  font-size: 44px;

  color: #333;

  &:hover

    {cursor: pointer;}

  }

　　

　　plugin.js

console.log('cynthia wuqian');

　　plugin2.js

　　

console.log('say hello grunt');

　　

　　4.这时候我们来到控制台，运行

grunt watchit

然后我们会看到 ： 自动建立了本地服务，显示index.html , 修改scss后，grunt会帮你自动生成css,并更新到页面

而页面中我们也能看到

注意事项（后补充，不是以上文件目录结构）

Grunt 入门操作指南的更多相关文章

  1. Grunt 入门

    转自:http://user.qzone.qq.com/174629171/blog/1404433906 Grunt被定义为:the javascript task runner. 什么算是Java ...

  2. Grunt入门学习之(1) -- 环境安装

    Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

  3. 前端构建工具 Grunt 入门

    之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...

  4. Grunt入门

    Grunt 新手一日入门 2014.06.20 前端相关 TOC 1. 用途和使用场景 2. 开发一个任务自动处理器 3. 开始学习 Grunt 3.1. 安装 Grunt 3.2. 生成 packa ...

  5. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  6. Grunt入门教程

    引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在N ...

  7. grunt入门之grunt watch的使用

    watch几乎是grunt必不可少的应用,一旦配置好watch,保存文件后将立即执行命令 安装方式如下: npm install grunt-contrib-watch --save-dev 安装好以 ...

  8. grunt入门讲解1：grunt的基本概念和使用

    Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...

  9. grunt入门讲解7：项目脚手架grunt-init

    grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给 ...

随机推荐

  1. Javascript高级编程学习笔记（34）—— 客户端检测（3）用户代理检测

    用户代理检测 前面的文章介绍的是如何检测浏览器对某一功能的支持情况 但是在实践中我们有些时候免不了需要知道用户到底是用的什么浏览器对我们的站点进行访问 这也是统计用户行为的一部分 用户代理检测这种方式 ...

  2. WPF中TreeView控件的使用案例

    WPF总体来说还是比较方便的,其中变化最大的主要是Listview和Treeview控件,而且TreeView似乎在WPF是一个备受指责的控件,很多人说他不好用.我这个demo主要是在wpf中使用Tr ...

  3. 可能是把Java内存区域讲的最清楚的一篇文章

    写在前面(常见面试题) 下面是面试官可能在“Java内存区域”知识点问你的问题,快拿出小本本记下来! 基本问题: 介绍下Java内存区域(运行时数据区). Java对象的创建过程(五步,建议能默写出来 ...

  4. update-rc.d: error: XXX Default-Start contains no runlevels, aborting.

    root@hm-saas-db:/etc/init.d# update-rc.d confluence disable update-rc.d: error: confluence Default-S ...

  5. oracle批量去掉字段值空格

    --查询验证 select ltrim(col1) from t1; --去掉字段值左边空格update t1 set col1=ltrim(col1); --去掉字段值右边空格update t1 s ...

  6. sql server 性能调优之 资源等待PAGELATCH

    一.概述 在前几章介绍过 sql server 性能调优资源等待之PAGEIOLATCH,PAGEIOLATCH是出现在sql server要和磁盘作交互的时候,所以加个IO两个字.这次来介绍PAGE ...

  7. ⑦JSP2.0的福利（标签文件）

    前言 本篇接着上一篇博客:[传送门] 这次讲的是JSP2.0的特性之一,我们可以编写标签文件,指没有标签处理器和标签类库描述符的定制动作指令,不编译,无标签类描述符. 本文结构: ①标签文件简介 ②第 ...

  8. java与json，一篇就够了

    本示例使用的json包为阿里的fastjson 首先写三个工具类(seter和geter方法省略,自行补上): /** * 屏幕实体类 */ public class Screen { private ...

  9. leetcode — first-missing-positive

    /** * * Source : https://oj.leetcode.com/problems/first-missing-positive/ * * Created by lverpeng on ...

  10. 基于vue与vux做的可滑动tab组件（附源码）

    背景 前不久,刚完成了一个商品列表+购物车功能的页面,因为一级商品分类在顶部tab中显示,可滑动,间距可定制,如下图所示: 定制的tab需求如下: 1. 每个tab-item的间距是相同的,可定制 2 ...