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

grunt使用入门(zz)

时间:2016-03-15 20:26:43      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:

下面介绍grunt的基本使用方法,把前端项目中的对个js文件,合并到一起,并压缩。

注意,例子用的是grunt 0.4.5版本,低版本可能在配置上有所不同。

工具/原料

  • node

方法/步骤

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

    npm install -g grunt-cli

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

    技术分享
  3. 在项目目录下安装grunt 

    npm  instal grunt --save-dev

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

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

    技术分享
  5. 把开发目录下的所有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还没有生成

    全部代码如下图

    技术分享
  6. 运行grunt后结果如下

    技术分享
  7. 7

    这个是dist文件夹下的内容





grunt使用入门(zz)

标签:

原文地址:http://www.cnblogs.com/strinkbug/p/5280737.html

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