码迷,mamicode.com
首页 > 其他好文 > 详细

grunt使用入门

时间:2017-06-28 19:02:33      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:开发   idt   cat   sig   glob   pack   --   file   photo   

一、首先用npm在global环境安装grunt-cli ,注意在任何目录下 install -g都是一样的 npm install -g grunt-cli

技术分享

技术分享

技术分享

二、安装grunt插件时项目中一定要package.json,所以在项目中加一个最简单的package.json。不然的话插件安装不上。

技术分享

三、

在项目目录下安装grunt 

npm  instal grunt --save-dev

技术分享

四、

我在前端项目中经常需要concat和压缩,所以一下只掩饰这两个插件

npm install grunt-contrib-concat grunt-contrib-uglify --save-dev

技术分享

五、

把开发目录下的所有js,合并到dist目录保存为main.js

concat: {

        dist: {

            // the files to concatenate

            src: [‘src/*.js‘],

            // the location of the resulting JS file

            dest: ‘dist/main.js‘

        }

    }

 

把合并目录下的js,压缩

uglify: {

        dist: {

            files: {

                ‘dist/main.min.js‘: [‘<%= concat.dist.dest %>‘]

            }

        }

    }

如果不用‘<%= concat.dist.dest %>‘,而是直接写路径dist/main.js,那很可能在压缩时main.js还没有生成

 

全部代码如下图

技术分享

六、运行grunt后结果如下

技术分享

七、这个是dist文件夹下的内容

技术分享

原文:http://jingyan.baidu.com/article/546ae185058da31149f28ce1.html

 

grunt使用入门

标签:开发   idt   cat   sig   glob   pack   --   file   photo   

原文地址:http://www.cnblogs.com/stonespawn/p/7090726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!