前端构建工具grunt

简单配置grunt

配置gulp还是grunt都是在node的环境下安装的,所以在这之前保证你的node环境已经安装好了!

--------------------------------------------------------------------------------

* nodejs安装很简单,去百度搜索 nodejs官网下载。

   下载这个之后直接双击,点击安装和下一步就好,这里很简单不必多说。

*其次就是验证你安装nodejs是否成功的方法:别多想,fn+f5,输入cmd,然后输入,node -v,出现了下面结果就说明安装成功了,然后继续修行!

然后安装淘宝镜像,安装淘宝镜像的原因你好奇可以自己百度一下!接下来步骤:在刚才输入node -v的界面输入npm install -g cnpm --registry=https://registry.npm.taobao.org 等待安装!安装完成同样,可以输入cnpm -v验证有木有安装成功! 接下来需要你在某个文件夹下操作,跟着做,输入(我进入F盘的requirejs):1,f:

      2,cd requirejs ,

      3.全局安装grunt,输入:  cnpm install -g grunt-cli

      4,这之后要配置一个json文件在你刚才的目录下, ,

      5.输入:cnpm install。安装成功会生成一个node_modules的文件。

      6,跟配置json文件一样配置Gruntfile.js:在你的此js文件中输入:

  读取package.json的信息
       pkg:grunt.file.readJSON(‘package.json‘) 

    module.exports = function(grunt){
        // 配置
        grunt.initConfig({
            pkg:grunt.file.readJSON(‘package.json‘)
        })
       // 加载插件
        grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

        // 默认任务
        grunt.registerTask(‘default‘,[‘uglify‘]);
    }

其中grunt.loadNpmTasks(‘grunt-contrib-uglify‘);是压缩js插件,就是我我这里智配置了js压缩插件,需要什么直接加载插件就行,然后后面的步骤都一样;解释一下uglify:{}对象里面的build参数,src是你要压缩的js路径,dest是一个你要解压到的路径;配置号以后,基本可以压缩你js下的文件了;     7,命令行输入:grunt;出现了,绿色的 Done without error说明压缩成功,文件夹有 a.mon.js说明成功了;

一些插件和参数供你们学习和参考:
<!--
grunt-contrib-uglify js压缩
grunt-contrib-uglify:压缩以及合并JavaScript文件。
参数:

banner:文档头部添加,一般做说明和注释用

footer:文档底部添加,与banner功能相同
mangle:参数为false不混淆变量名(不改变原始定义的变量名);true:压缩后,改变原始定义的变量名
preserveComments:参数为all:保留注释;false:删除全部注释;some:保留@preserve/@license/@cc_on等注释

report:参数为min:输出压缩率;false:不输出信息;也可为gzip

beautify:参数为true:美化代码,即格式化显示,合并对象等;false:不美化代码

1.按原文件结构压缩js文件夹内所有JS文件

    expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
    cwd:需要处理的文件所在目录
    src:表示需要处理的文件。如果采用数组的形式,数组中的每一项都是一个文件名,可以使用通配符(*)。
    dest:处理后的文件所在的目录。
    ext:处理后的文件的后缀名。
    flatten:删除所有生成的dest的路径部分。
    rename:一个函数,接受匹配到的文件名、匹配的目标位置,返回一个新的目标路径。

grunt.initConfig({
  pkg: grunt.file.readJSON(‘package.json‘),
  uglify: {
    options: {
      //添加banner
      banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
    },
    buildall: {
      files: [{
        expand: true,
        cwd: ‘js‘,//js目录下
        src: ‘**/*.js‘,//所有js文件
        dest: ‘output/js‘//输出到此目录下
      }]
    }
  }
});

合并压缩
grunt.initConfig({
  pkg: grunt.file.readJSON(‘package.json‘),
  uglify: {
    release: {// 合并压缩a.js和b.js
      files: {
        ‘output/js/index.min.js‘:[‘js/a.js‘,‘js/b.js‘]
      }
    }
  }
});
 


       
时间: 2024-10-17 06:38:34

前端构建工具grunt的相关文章

grunt前端构建工具使用教程

grunt能干些什么? grunt其实是哆啦a梦的百宝袋,是工具集,拥有非常丰富的任务插件,可以实现各式各样的构建目标. 按任务目标大致可分为四类: 文件操作型:比如合并.压缩js和css文件等(包括) 预编译型:比如编译less.sass.coffeescript等 类库项目构建型:比如 angular.ember.backbone等(这种推荐使用yeoman) 工程质量保障型:比如jshint.jasmine.mocha等 除此之外还有像 watch (监听文件改变,自动触发构建)等功能.

前端构建工具的用法—grunt、gulp、browserify、webpack

随着前端项目的飞速发展,项目越来越大.文件越来越多,前端工程化的工具也越来越多.下面介绍目前最流行的四种构建工具——grunt.gulp.browserify.webpack 所有的构建工具都是基于NodeJs和Npm,所以使用下面任何工具都需要安装Node 一.grunt 1.需要两个文件: Gruntfile.js —— grunt执行任务文件:描述项目会执行的任务. package.json —— 工程描述文件:描述项目基本信息,和项目中使用到的npm包信息,方便其他人了解项目信息.跑起来

前端开发自动化工作流工具:JavaScript自动化构建工具grunt、gulp、webpack介绍

前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护.打包.发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率.致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程.提高效率.减少错误率.随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部

前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst

前端构建工具gulpjs的使用介绍及技巧(转载)

本文转载自无双 ,原文地址 http://www.cnblogs.com/2050/p/4198792.html. 感谢原博主的辛苦总结. gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的AP

前端构建工具gulpjs

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快. 1.安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装

前端自动化工具 -- grunt 使用简介

grunt是什么,grunt就是个东西.. grunt作为一个前端构建工具,有资源压缩,代码检查,文件合并等功能. 下面就简单了解grunt的使用. 一.环境配置 grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以 来这看看 还是在windows下, 首先要保证grunt命令可以使用,所以要先使用npm安装对应CLI npm install -g grunt-cli 安装完成可以命令行中输入“grunt”测试是否安装成功 安装成功后 二.用法说明 grunt需要pac

Gulp.js----比Grunt更易用的前端构建工具

Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一职责.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情.比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个环节是谁). 用插件做一些本来不需要插件来做的事情.因为

[转载]前端构建工具gulpjs的使用介绍及技巧

转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp