grunt自动化构建工具

一、什么是grunt?

  是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器

二、为什么要用grunt?

  自动化。对于反复重复的任务,例如压缩、编译、单元测试等,自动化工具可以减轻你的劳动,简化你的工作

三、如何使用?

  1、首先安装nodejs,安装包及源码下载地址:https://nodejs.org/en/download/。

  2、安装grunt,需要先将grunt命令行(CLI)安装到全局环境中,

    npm install -g grunt-cli

    上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

  3、一般在项目中需要添加两份文件:package.json 和 Gruntfile.js

  package.json 如下:

{  "name": "gruntTest",  "version": "1.0.0",  "devDependencies": {    "grunt": "^1.0.1",    "grunt-contrib-jshint": "^1.0.0",   //检查js语法    "grunt-contrib-uglify": "^2.0.0",  //js压缩    "grunt-contrib-watch": "^1.0.0"   //监听js文件变动  }}    Gruntfile.js 如下:
module.exports = function(grunt){    grunt.initConfig({        pkg:grunt.file.readJSON(‘package.json‘),        uglify:{            bulid:{                expand: true,   //启用动态扩张                src:‘DemoTmp/js/*.js‘,  //需要压缩的js文件所在路径                //dest:‘DemoTmp/js/‘,   //压缩后文件所在路径                ext:‘.min.js‘,      //压缩后的文件名                extDot:‘first‘      //扩展文件名开始后第一个点            }        }    });    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  //加载任务插件    grunt.registerTask(‘default‘,[‘uglify‘]);    //默认被执行的任务列表};
4、以上两个文件配置好后,就可以进行操作了:  1)将命令行的当前目录转到项目根目录下  2)执行 npm install 命令安装项目依赖的库  3)执行 grunt 命令
 

    

时间: 2024-12-17 21:37:31

grunt自动化构建工具的相关文章

JavaScript自动化构建工具入门----grunt、gulp、webpack

蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 安装 常用插件.压缩插件.合并插件等.  用插件实现 功能无限扩展 简单介绍三种工具 grunt 是js任务管理工具(自动化构建工具)    -- Grunt官网 戳这里 优势:出来早 社区成熟  插件全 缺点:配置复杂   效率低 (cpu占用率高) -------------------------

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

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

前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin

gulp——基于流的自动化构建工具

目录 gulp简介 gulp API gulp常用任务 gulp的使用 4.1 gulp安装 4.2 创建gulpfile.js 4.3 运行gulp 延伸阅读 gulp简介 gulp.js是一个前端自动化构建工具,前端开发者可以使用它在项目开发过程中自动执行常见任务. gulp.js是基于流(stream)操作的,直接将上一步的输出通过管道(pipe)输入到下一步,可以快速构建项目并减少频繁的IO操作. 参考: 英文官网:http://gulpjs.com/ 中文官网:http://www.g

前端自动化构建工具

全局安装是把包安装在Node安装目录下的node_modules文件夹中,一般在 \Users\用户名\AppData\Roaming\ 目录下,可以使用npm root -g查看全局安装目录 本地(局部)安装是把包安装在指定项目(要在指定的根目录下输入命令)的node_modules文件夹下(若没有,会自动创建一个node_modules文件夹) 具体区别,推荐博文:  全局安装和本地(局部)安装的区别 本地安装可以让每个项目拥有独立的包,不受全局包的影响,方便项目的移动.复制.打包等,保证不

自动化构建工具----gulp

gulp是什么? Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发环境). gulp基于流的操作. 常见构建工具:Grunt,gulp,webpack,FIS.. gulp有什么用? 网页自动刷新,CSS预处理,代码检测,图片压缩等功能,只需要简单的命令行就可以全部完成.使用它, 可以简化工作,让你把重点放在功能的开发上,同时减少人为失误,提高开发的效率和质量. gulp怎么用? .以[email protected]为例 1.初始化npm npm i

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

gulp自动化构建工具

gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/

前端自动化构建工具Webpack开发模式入门指南

Webpack Webpack是时下最流行的模块打包器 它的主要任务就是将各种格式的JavaScript代码,甚至是静态文件 进行分析.压缩.合并.打包,最后生成浏览器支持的代码 特点: 代码拆分方案:webpack可以将应用代码拆分成多个块,每个块包含一个或多个模块,块可以按需异步加载,极大提升大规模单页应用的初始加载速度 智能的静态分析:webpack的智能解析器几乎可以处理任何第三方库 Loader加载器:webpack只能处理原生js模块,但是loader可以将各种资源转换为js模块 p