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. 5个相见恨晚的Linux命令

    阅读本文大概需要 2.4 分钟. 作者 | 李火清 转载自[CU技术社区] 编者按:说到Linux命令相信大家都不陌生,就连前端现在也要经常在 terminal 敲一些 node,gulp等命令,本文 ...

  2. 第46节：Java当中的常量池

    Java当中的常量池 在Java虚拟机jvm中,内存分布为:虚拟机堆,程序计数器,本地方法栈,虚拟机栈,方法区. 程序计数器是jvm执行程序的流水线,是用来存放一些指令的,本地方法栈是jvm操作系统方 ...

  3. git常用命令总结——你一定会用到的几个命令

    git入门看廖雪峰大神的教程即可,通俗易懂:      https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b806 ...

  4. Python Tkinter 简单使用

    简单的一些实例,能够实现一般的功能就够用了 Tkinter: 创建顶层窗口: # -*- coding: utf-8 -*- from Tkinter import *   root = Tk() r ...

  5. webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

    当我们出现以下报错! 解决方案: // webpack配置文件 const path = require('path'); const htmlWebpackPlugin = require('htm ...

  6. CentOS 7的安装详解

    不多说,直接上干货! CentOS 6.5的安装详解 主流:  目前的Linux操作系统主要应用于生产环境, 主流企业级Linux系统仍旧是RedHat或者CentOS. 免费: RedHat 和Ce ...

  7. 函数式编程之-拒绝空引用异常(Option类型)

    众多语言都会设计Option类型,例如Java 8和Swift都设计了Optional类型.其实这种类型早就出现在了函数式语言中,在OCaml和Scala中叫Option,在Haskell中叫Mayb ...

  8. Linux两台主机之间建立信任（ssh免密码）

    背景: 有时候我们在两个主机之间复制文件的时候,提示输入密码,很不方便,那如何免密码复制呢?,就是使用通过linux公钥和秘钥,建立双机信任关系. 在整理之前,我先说下ssh免密码的要点 : 你想免密 ...

  9. k8s部署kafka集群

    一.概述 在k8s里面部署kafka.zookeeper这种有状态的服务,不能使用deployment和RC,k8s提供了一种专门用来部署这种有状态的服务的API--statefulset,有状态简单 ...

  10. datatables 配套bootstrap样式使用小结（2） ajax篇

    距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼. 上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学, ...