成长的前端erTechgrunt

grunt入门

2016-11-05  本文已影响118人  PengL

</br>

grunt是一个优秀的前端的自动化生产工具,最开始作者一直不用这类工具,感觉麻烦,但是当后面项目大一些后开始尝试使用,就一发不可收拾,但是对于grunt的一些机制原理等,自己也是捣鼓了一些时间,今天就来总结一下自己的经验,希望对部分同学能有一些帮助。


1.grunt的用处

对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,代码合并等等,grunt可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你完成大部分无聊的工作

2.grunt的三要素

先来简单解释一下这三个要素吧
1. task

这个就是grunt的任务,之前提过grunt是用来自动执行各种各样的任务的,比如压缩文件,合并文件,单元测试等等,这些都是一系列任务

2.target

这个是任务的目标,也就是任务具体做的事,例如有一个合并文件的任务,这个任务可以做两件具体的事:

每一个具体的事情就是一个target

3.options

从字面上就可以理解,这个就是配置。task或者target的配置,每个task有自己的配置,每个target也可以有自己的配置


开始做个Demo吧

</br>

咱们按顺序开始以下几步吧
module.exports=function(grunt){
// 任务配置,所有插件的配置信息
grunt.initConfig({
    // watch插件配置信息,用于观察文件的变化
    watch:{
        build:{
            files:['src/js/*.js','src/css/*.css'],
            tasks:['jshint','uglify','cssmin','csscomb'],
            options:{spawn:false}
        }
    },
    // uglify插件配置信息,用于压缩文件
    uglify: {
      build: {
        files:{
            'build/js/yourName.min.js':['src/js/test.js']
        } 
      }
    },
    // cssmin插件配置信息,用于压缩css
    cssmin:{
        options: {
            shorthandCompacting: false,
            roundingPrecision: -1
        },
        build: {
            files: {
              'build/css/output.min.css': ['src/css/*.css']
            }
        }
    },
    // csscomb插件配置信息,用于合并css
    csscomb: {
        bulid: {
            files:{
                "src/dest/css/output.restored.css":["src/css/test.css"],
                "src/dest/css/output2.restored.css":["src/css/test2.css"]
            }
        }
    }
});
// 加载包含任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-csscomb');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify','cssmin','csscomb','watch']);
};

在上面的代码中,有watch,uglify,cssmin,csscomb四个task,每个task里面都有自己的options和target(uglify里没有options因为options并不是必须的,根据需求而定)</br>

对于每个task的build target里都有files属性,files属性里主要是输入和输出文件,files中的输入输出文件有四种写法,在grunt中文官网有详细描述,这里我就不细说了。
</br>
对于每个task的options,不同插件有不同的配置方式,需要各位在使用对应的插件时,去grunt插件官网看看基本的配置方法和插件描述


总结一下,grunt这个工具的目的其实就是让我们方便地使用各种插件来帮助我们进行开发,而它的工作机制其实就是:首先我们用node安装好了基本的环境后,需要用什么插件就node install 插件名称,然后在Gruntfile.js中配置这个插件task的options和target就行了,最后按需执行插件!

</br>

这篇其实算不上一个grunt的完整Demo,比如路径配置,files,特殊插件配置和更灵活的用法都没介绍,我也没打算做这样一个教程,因为也已经有不少优秀的grunt教程了,grunt中文网也有。不过单看教程并不能让我们更好地使用grunt,后面需要用到的其他插件需要去官网看看插件的基本配置和介绍,一些其他用法也都是需要去官网或者其它大牛博客看看的,我现在只是从理解grunt本身这方面来做的一个浅显的介绍,希望能帮助到部分同学,共勉!

上一篇下一篇

猜你喜欢

热点阅读