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. 解决微信小程序登录与发布的一些问题

    解决微信小程序的问题 图片在电脑上显示但在手机上却无法显示的问题 要使用的是本地图片,不想把图片上传到网络再通过https的方式解决,解决方法如下: 1.image src中的图片地址对英文字母大小写 ...

  2. 使用link标签进行预加载

    概述 html中的link标签一般用来引入css文件.但是也可以通过rel属性来进行预加载.本文记录下相关方法,供以后开发时参考,相信对其他人也有用. 参考资料: mdn 通过rel="pr ...

  3. 我对开源C++网络库简单应用总结

    网上有篇文章<开源免费的C/C++网络库(c/c++ sockets library) 七剑下天山>,看了之后觉得每个库都不错,这里我具体下载这些库看一下,简单总结一下: 顺便添加一些我找 ...

  4. InnoDB多版本

    InnoDB是一个多版本的存储引擎:为了支持事务的一些特性诸如并发和回滚,它保持着被修改行的旧版本信息.这些信息被存储在一个被叫做“回滚段”的表空间中(跟Oracle中的回滚段类似).InnoDB在回 ...

  5. pip install 安装出现问题：UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法

    pip install 安装出现问题:UnicodeEncodeError: 'ascii' codec can't encode characters in position XX的解决办法 转自c ...

  6. AI历史和哲学基础浅谈

    换个角度看AI:研究历史和哲学逻辑 正如题图所示,仿生人会梦见电子羊吗?(注:Do Androids Dream of Electric Sheep?是Philip K. Dick所著的一本科幻小说, ...

  7. 一些不常用但又很有用的css小tips

    1.box-sizing:border-box box-sizing有三个属性:content-box(默认值) || border-box || inhreit.第一个自然不用说,比如我们设置一个d ...

  8. 纸上谈兵: 堆 (heap)

    纸上谈兵: 堆 (heap)   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 堆(heap)又被为优先队列(priority ...

  9. vue路由对不同界面进行传参及跳转的总结

    最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...

  10. 不到50行代码实现一个能对请求并发数做限制的通用RequestDecorator

    使用场景 在开发中,我们可能会遇到一些对异步请求数做并发量限制的场景,比如说微信小程序的request并发最多为5个,又或者我们需要做一些批量处理的工作,可是我们又不想同时对服务器发出太多请求(可能会 ...