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. Android屏幕相关的概念

    1. 屏幕尺寸 实际的物理尺寸,作为屏幕的对角线测量. 为简单起见,安卓所有的实际屏幕尺寸为四个广义的大小:小,正常,大,和特大. 2. 屏幕密度 一个屏幕的物理区域内像素的数量:通常称为DPI(每英 ...

  2. 怎么随时获取Spring的上下文ApplicaitonContext，和Spring管理的Bean

    BeanFactory接口 Interface BeanFactory getBean <T> T getBean(String name, Class<T> required ...

  3. join和+的区别

    连接字符串的时候可以用join也可以用+,但这两者有没有区别呢? 我们先来看一下用join和+连接字符串的例子 str1 = " ".join(["hello" ...

  4. Spring Data Redis 详解及实战一文搞定

    SDR - Spring Data Redis的简称. Spring Data Redis提供了从Spring应用程序轻松配置和访问Redis的功能.它提供了与商店互动的低级别和高级别抽象,使用户免受 ...

  5. Python入门必学，用Python练习画个美队盾牌

    0 环境 Python版本:3.6.6 操作系统:Mac OS Mojave 10.14.2 1 引言 最近我媳妇每天晚上吃饭时候也拿手机看,上厕所也在看. 看着看着还会笑?WTF?你在干嘛呢? 没错 ...

  6. [学习笔记]利用e-debug和GetWindowTextA破解CM课件

    本课是针对注册时候的报错弹窗不是信息框MessageBox,而是窗体的情况 首先打开课件看一下 既然课件是个易语言程序,那使用E-DEBUG试试 E-DEBUG打开课件,点击“start”,课件弹出登 ...

  7. 程序员周末阿里面试，5分钟就被一道题秒杀：HashMap与Hashtable

    你们可能会想,我这么菜的吗?5分钟都坚持不了? 本文说起来会有点尴尬,毕竟这是我曾经经历过的故事 那时候的我还真菜,每天写着 if/ for 及一些简单的业务逻辑代码,虽工作有些日子了,但技术水平还停 ...

  8. alert换行

    alert( "视频会议系统开启流程 " + String.fromCharCode(13) + "1.  软件下载之后双击安装即可." + String.fr ...

  9. springBoot(6)---过滤器，监听器，拦截器

    过滤器,监听器,拦截器 一.理解它们 看里十几篇博客,总算有点小明白,总的来讲,两张图可以让我看明白点. 通过两幅图我们可以理解拦截器和过滤器的特点 1.过滤器 过滤器是在请求进入tomcat容器后, ...

  10. java提高（7）---TreeSet--排序

    TreeSet(一) 一.TreeSet定义:      与HashSet是基于HashMap实现一样,TreeSet同样是基于TreeMap实现的.            1)TreeSet类概述 ...