首页 > 其他 > 详细

?Grunt系列教程之(一)

时间:2014-08-15 22:37:09      阅读:443      评论:0      收藏:0      [点我收藏+]

?Grunt系列教程之一

    ?grunt是一个强大的自动化构建工具,它能自动的执行你自定义的任务,帮助你编译、压缩、单元测试等。它可以极大的减轻作为程序员的工作量。一切无聊枯燥且重复的工作就交给grunt来完成吧!

    ?grunt中有非常多的插件,有官方的可以直接使用,如果你觉得这还不够,你可以自己亲自写一个插件,将其发布到npm上。

    ?常用的grunt插件有:

  1. ?Less

  2. handlebars

  3. jade

  4. JS Hint

  5. watch

    ?下面我们就以less为例,来看看如何使用grunt来把less编译为css并压缩。

    ?首先我们要通过npm安装grunt命令行(CLI)到全局变量中

    npm install -g grunt-cli

    ?CLI安装完成后,就可以建一个grunt项目来跑了。

    ?新建一个grunt文件夹,在grunt中新建package.json和Gruntfile.js文件。

    ?package.json为配置信息,里面可以配置需要导入的插件和一些变量或常量。

    {    
      "name": "XXX",
      "version": "0.1.0",
      "devDependencies": {
        "grunt": "~0.4.2",
        "grunt-contrib-jshint": "~0.6.3",
        "grunt-contrib-nodeunit": "~0.2.0",
        "grunt-contrib-uglify": "*",
        "grunt-contrib-less": "*",
        "grunt-contrib-concat":"*",
        "grunt-contrib-yuidoc": "*",
        "grunt-contrib-cssmin":"*",
        "grunt-contrib-watch":"*"
      }
    }

?    ?Gruntfile.js为任务的配置,可以理解为程序的主入口。

    module.exports = function(grunt) {
        grunt.initConfig({
            less: {
                compile: {
                    files: {
                        ‘a.less‘
                    }
                }
            },
            cssmin:{
                minify: {
                    expand: true,
                    src: [‘a.css‘],
                    dest: ‘‘,
                    ext: ‘.min.css‘
                }
            },
            watch: {
                css: {
                    files: [‘/*.less‘],
                    tasks: [‘less‘,‘cssmin‘]
                }
            },
        });
        grunt.loadNpmTasks(‘grunt-contrib-less‘);
        grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
        grunt.loadNpmTasks(‘grunt-contrib-watch‘);
        
        grunt.registerTask(‘default‘, [‘less‘,"cssmin","watch"]);
    };

    ?在当前目录下,命令行输入 grunt 就能开始执行 less,cssmin,watch任务。

    ?下面讲解一下上面的代码。

    ?首先我们配置了less插件,并指定将a.less编译成a.css并保存在当前的目录,接着是配置了cssmin插件,将上一步生成的a.css文件进行压缩,生成a.min.css文件。我们需要的就是最终生成的那个a.min.css文件。

    ?下面来看一下神奇的watch插件。我们在项目开发中,不可能每修改一次a.less,都手动去执行命令grunt。所以我们需要一个监听文件改变的东东,它就是watch。我们在配置中,用watch插件监听当前目录下,所有的less文件,只要有改动,就会再次执行 less 和 cssmin插件。是不是很方便?

    ?上面是使用grunt最简单的一个例子,后面的文章会对grunt的更多特性以及插件做更详细的讲解。


    文章作者:forevercjl

    文章原文链接:http://blog.csdn.net/forevercjl/article/details/38590305

?Grunt系列教程之(一),布布扣,bubuko.com

?Grunt系列教程之(一)

原文:http://blog.csdn.net/forevercjl/article/details/38590305

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!