用grunt搭建自动化的web前端开发环境-完整教程

超、凢脫俗 2022-08-23 00:35 102阅读 0赞

各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重复，表 示重点）。至于grunt的作用，这里不详细说了，总之你如果做web前端开发，你一定要用grunt。还有一点，它完全免费，没有盗版。既强大又免费的 东西，为何不用？  
当然了，你如果你能找到更好的替代grunt的其他工具也是可以的，例如gulp。Gulp未来有可能替代grunt，但是现在来说市场占有率还是不如grunt。而这种工具咱们是现在就需要用的，所有不要再犹豫了，拿来主义，先用grunt，即学即用。  
本文章旨在讲解grunt入门，以及讲解grunt最常用的几个插件的使用。篇幅可能会比较长，大家耐心看。本文例证详细、清晰的讲解每一个知识点。 但是——如果你看完本文还是不会，我还有最后一个大招。不过你可能需要付出一顿饭钱 + 一包烟钱的代价——去看看我录制的视频教程《用grunt搭建自动化的web前端开发环境》（教程中有源码下载） ，保证你看完就会用。  
（PS：碰巧，本文基于windows环境写的，而视频教程是基于mac os录制的，两者兼备了）  
废话不多少，视频教程你也先别看，钱别着急花。先挑战一下自己的理解能力，看下文讲述是否清晰、是否能看懂。

教程参考：[http://developer.51cto.com/art/201506/479127.htm][http_developer.51cto.com_art_201506_479127.htm]  
中文官网：[http://www.gruntjs.net/getting-started][http_www.gruntjs.net_getting-started]

npm install -g grunt-cli
    
    npm install  grunt  --save-dev

文档目录

![这里写图片描述][20160613114245635]

插件安装

npm install grunt-contrib-csslint --save-dev  css语法检查
    npm install grunt-contrib-cssmin --save-dev    css压缩
    npm install grunt-contrib-jshint --save-dev   js语法检查
    npm install grunt-contrib-uglify --save-dev  js压缩
    npm install grunt-contrib-watch --save-dev   自动化检查

css语法检查

.csslintrc

{
        "adjoining-classes":false,
        "box-sizing":false,
        "box-model" : false,
        "compatible-vendor-prefixes": false,
        "floats":false,
        "font-sizes":false,
        "gradients":false,
        "important":false,
        "known-properties":false,
        "outline-none":false,
        "qualified-headings":false,
        "regex-selectors":false,
        "shorthand":false,
        "text-indent":false,
        "unique-headings":false,
        "universal-selector":false,
        "unqualified-attributes":false
    }

js语法检查配置文件  
.jshintrc

{
        "boss":false,
        "curly":true,
        "eqeqeq":true,
        "eqnull":true,
        "expr":true,
        "immed":true,
        "newcap":true,
        "noempty":true,
        "noarg":true,
        "undef":true,
        "regexp":true,
    
        "browser":true,
        "devel":true,
        "node":true
    }

Gruntfiles.js

//包装函数
    module.exports = function(grunt){
        
        //任务配置，所有插件的配置信息
        grunt.initConfig({
            //获取package.json的信息
            pkg: grunt.file.readJSON('package.json'),
            // ugilify插件的配置信息
            uglify:{
                option:{
                    stringBanners:true,
                    banner:'/*<%=pkg.name%>-<%=pkg.version%>.js <%- grunt.template.today("yyyy-mm-dd")%>*/\n'
                },
                bulid:{
                    src:"src/test.js",
                    dest:'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
                }
            },
            //jshint插件配置信息
            jshint:{
                bulid:['Gruntfile.js','src/*.js'],
                options:{
                    jshintrc:'.jshintrc'
                }
            },
            csslint:{
                bulid:['Gruntfile.js','src/*.css'],
                options:{
                    csslintrc:'.csslintrc'
                }
            },
            //watch 插件的配置信息
            watch:{
                bulid:{
                    files:['src/*.js','src/*.css'],
                    tasks:['jshint','csslint','uglify'],
                    options:{spawn:false}
                }
            }
    
    });
        // 告诉grunt我们将使用的插件
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-jshint');
        grunt.loadNpmTasks('grunt-contrib-csslint');
        grunt.loadNpmTasks('grunt-contrib-watch');
    
        // 告诉grunt当我们在终端中输入grunt时需要做些什么（注意先后顺序）
        grunt.registerTask('default',['jshint','uglify','csslint','watch']);
    };

[http_developer.51cto.com_art_201506_479127.htm]: http://developer.51cto.com/art/201506/479127.htm
[http_www.gruntjs.net_getting-started]: http://www.gruntjs.net/getting-started
[20160613114245635]: /images/20220722/35a466961d934ed5b61e813c227beae4.png