Grunt 入门操作指南

Posted 2020-06-27 Cynthia娆墨旧染

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Grunt 入门操作指南相关的知识，希望对你有一定的参考价值。

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;}
  }