grunt的使用

最新推荐文章于 2025-09-11 10:39:32 发布

Mathilda91

最新推荐文章于 2025-09-11 10:39:32 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： json python

原文链接：https://my.oschina.net/xbuding/blog/668916

本文详细介绍了如何使用Node.js、Grunt、SASS在本地环境中搭建一个高效、自动化的设计开发流程。从安装命令行工具、创建项目、初始化工程，到配置Grunt任务实现SASS编译、文件监视等功能，最终通过实践演示了如何快速启动并维护一个现代化的前端开发工作流。

2019独角兽企业重金招聘Python工程师标准>>>

安装 Grunt命令行（CLI）

sudo npm install -g grunt-cli

到桌面建立自己的工程demo

mkdir gruntLearn

进入gruntLEarn文件夹执行命令初始化工程:

sudo npm init

该命令，讲创建一个package.json文件：

{
  "name": "learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装grunt：

sudo npm install grunt --save-dev

--save-dev的作用是将该依赖包写入 package.json中

分别安装 sass和watch

sass需要本地安装(自行google)

sudo npm install grunt-contrib-sass --save-dev
sudo npm install grunt-contrib-watch --save-dev

然后执行

再次查看package.json

{
  "name": "learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"，
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-watch": "^1.0.0"
  }
}

建立grunt的Gruntfile 文件，touch Gruntfile.js，先看看完整的Gruntfile文件：

//wrapper函数
module.exports = function(grunt){

    //读取package.json
    grunt.file.readJSON('package.json');

    //初始化Grunt
    grunt.initConfig({

        //Sass任务
        sass: {
            //Sass开发选项
            dev: {
                options: {
                    style:"expanded"
                },
                files: {
                    'css/main.css':'css/sass/main.scss'
                }
            },

            //Sass发布选项
            dist: {
                options: {
                    style:'compressed'
                },
                files: {
                    'css/main.css':'css/sass/main.scss'
                }
            }
        },
        //监测文件
        watch:{
            //监测.scss文件
            sass: {
                files:['css/sass/**.scss'],
                tasks:['sass:dev']
            },
        },
    });

    //加载任务
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    //创建默认任务
    grunt.registerTask('default',[
        'sass:dev',
        'watch',
    ]);

    //创建发布任务
    grunt.registerTask('dist',[
        'sass:dist'//编译Sass的发布设置
    ]);
};

Gruntfile.js的主要工作：

配置任务在grunt.initConfig中：

//配置sass任务
//Sass任务
        sass: {
            //Sass开发选项
            dev: {
                options: {
                    style:"expanded"
                },
                files: {
                    'css/main.css':'css/sass/main.scss'
                }
            },

            //Sass发布选项
            dist: {
                options: {
                    style:'compressed'
                },
                files: {
                    'css/main.css':'css/sass/main.scss'
                }
            }
        },

并且添加监听，在sass文件保存之后继续，编译sass文件

//监测文件
        watch:{
            //监测.scss文件
            sass: {
                files:['css/sass/**.scss'],
                tasks:['sass:dev']
            },
        },

当然，到时可以在这里加上js等文件的监听。

加载任务（把需要用到的任务，加载到grunt中）：

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');

再创建默认的任务：

grunt.registerTask('default',[
        'sass:dev',
        'watch',
    ]);

测试：

在当前文件夹，建立css/sass/main.scss

body {
    width: 100%;
}

在工程的根目录运行

sudo grunt

即可，该任务会一直监听，main.scss的变化而重新编译。

对于发布选项的grunt的任务可以通过

sudo grunt sass:dist

进行编译

对于安装命令，很多都需要sudo，不然权限不够而无法安装，或者运行。

demo地址

转载于:https://my.oschina.net/xbuding/blog/668916