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 音视频开发(二)：使用 AudioRecord 采集音频PCM并保存到文件

    版权声明:转载请说明出处:http://www.cnblogs.com/renhui/p/7457321.html 一.AudioRecord API详解 AudioRecord是Android系统提 ...

  2. 9.视差特效、回弹动画、overScrollBy

    视差特效 * 应用场景: 微信朋友圈, QQ空间, 微博个人展示,向下拉出,松开回弹* 功能实现: > 1. 重写overScrollBy > 2. 松手之后执行动画, 类型估值器 .  ...

  3. 巧用这19条MySQL优化，效率至少提高3倍

    阅读本文大概需要 3.8 分钟. 作者丨喜欢拿铁的人 https://zhuanlan.zhihu.com/p/49888088 本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下: 1 ...

  4. python写的翻译代码

    # -*- coding: utf-8 -*- from Tkinter import *import difflibimport urllib2import urllib # python2.7才需 ...

  5. 从github上克隆hibernate项目

    开发的项目用到了hibernate进行对象的持久化,最近项目上不忙,打算通过官方文档和源码来进行深度学习.第一步将hibernate部署到本地就折腾了好久,打算记录一下. 关于github的注册说一句 ...

  6. PHP之ThinkPHP框架（验证码、文件上传、图片处理）

     验证码 验证码是框架自带有的,比之前使用GD库简单方便许多,其实现原理基本相似,都是生成图片,保存验证码值到Session中,表单提交验证码,然后进行值的对比验证. 简单的显示: <form ...

  7. IT老人，给后辈的十一点建议

    我已经在IT业打拼9年了,从完全自学成为技术团队leader到PM也确实总结了不少的经验,自己也经常跟学弟学妹聊天,分享职场经验,当老家有人报考计算机或者从事相关工作时也会咨询我的意见,我很明白IT人 ...

  8. ASP.NET Core微服务+Tabler前端框架搭建个人博客1--开始前想说的话

    写在前面 本人为在读研究生,特别喜欢.NET,觉得.NET的编程方式.语法都特别友好,学习.NET Core已经差不多有一年半了,从一开始不知道如何入门到现在终于可以编写一些小的应用程序,想一想还是非 ...

  9. SpringCloud实战9-Stream消息驱动

    官方定义 Spring Cloud Stream 是一个构建消息驱动微服务的框架. 应用程序通过 inputs 或者 outputs 来与 Spring Cloud Stream 中binder 交互 ...

  10. 获取完全一样的数据库，包括表与表之间的外键关系，check，default表结构脚本

    今天公司给了一个任务,某一个项目由于数据过大,造成Sql Server 2012 的运行占用很大内存,于是要把之前的不常用的数据分开.要求写个脚本,要求: 1.能获取原来数据库中的表结构,主键一致.表 ...