grunt前端自动构建工具初级使用
好啦,今天来和大家谈谈grunt
害怕与社会脱轨,所以自己研究了一下,简单说说我梳理完的grunt
首先要知道为什么使用grunt
1.grunt可以检测js、css文件内部是否有错误
2. grunt可以进行js、css\html...的压缩
3. grunt可以watch这些文件,就是监控这些文件,就像sass一样,源文件有变换,转化后的css会跟着变。也就是说,js、或css等源文件有变化,压缩的文件会跟着变
首先,grunt和vue一样,环境用的node,也需要全局安装
npm install -g grunt-cli
想要知道自己的grunt是否安装成功,可以执行
npm grount -version
然后在使用grunt之前,我们还需要准备两个文件
第一步:cd xxx 找到你的目的文件第二部:npm init(填写项目信息)
name: (GruntT) // 模块名称:只能包含小写字母数字和中划线,如果为空则使用项目文件夹名称代替
version: (0.0.0) // 版本号
description: // 描述:会在npm搜索列表中显示
entry point: (index.js) // 模块入口文件
test command: // 测试脚本
git repository: // git仓库地址
keywords: // 关键字:用于npm搜索,多个关键字用空格分开
author: // 作者
license: (BSD-2-Clause) // 开原协议
|
npm install grunt --save-dev
(将安装的grunt添加到 package.json中)
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-htmlmin grunt-contrib-cssmin grunt-contrib-imagemin grunt-contrib-watch grunt-contrib-connect ( 像我一样懒得可以用这种方法,Grunt 的基本所需插件一次安装)
npm install grunt-contrib-csslint --save-dev
(压缩css,其他的雷同)
module.exports = function(grunt) {
//导入要用的模块
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-concat');
//配置具体任务
grunt.initConfig({
uglify: { //主任务
a: { //分任务
expand: true, //分开执行
src: 'js/*.js', //源文件地址
dest: 'build' //导入到那个文件中
}
},
cssmin: {
a: {
expand: true, //分开执行
src: 'css/*.css',
dest: 'build'
}
},
htmlmin: {
options: {
removeComments: true, //去注释
collapseWhitespace: true //去空格
},
a: {
src: 'index.html',
dest: 'build/index.html'
}
},
imagemin: {
a: {
expand: true, //分开执行
cwd: 'images',
src: ['**/*.{png,jpg}'],
dest: 'build'
}
},
watch: { //监听
a: {
files: ['index.html', 'css/*.css'],
tasks: ['cssmin', 'htmlmin']
}
}
});
//注册一个默认任务
// grunt.registerTask('default', ['cssmin']);
// grunt.registerTask('default', ['htmlmin']);
// grunt.registerTask('default', ['watch']);
// grunt.registerTask('default', ['uglify']);
// grunt.registerTask('default', ['jshint']);
// grunt.registerTask('default', ['concat']);
grunt.registerTask('default', ['uglify', 'cssmin', 'htmlmin', 'watch']);
};
grunt 命令(执行默认的任务) ,当然你也可以只执行一类,比如:grunt jshint
grunt前端自动构建工具初级使用的更多相关文章
- 前端自动构建工具@gulp入门
gulp是一个自动化的前端工具.它可以利用自身的插件来实现一些功能,如sass.less编译:浏览器自动刷新,文件压缩.重命名.代码校验(个人使用sublime的插件进行校验)等功能.当然这些功能也可 ...
- 前端自动构建工具Gulp入门
基于nodeJs:通过不同插件能自动完成一系列动作,比如压缩js/css/img.解析模版标签.解析less等: 一.安装gulp 安装nodeJs 打开Node.js command prompt ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- 前端开发构建工具gulp的安装使用
曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- gulp前端自动化构建工具新手入门篇
很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gul ...
- Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用
Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...
- 自动构建工具Gulp
摘要: gulp与grunt一样,都是自动构建工具.和grunt相比它更突出一个流的概念,任务是一个接一个执行的.今天就分享如何用gulp做自动化. 安装: gulp也是基于node环境,所以安装g ...
随机推荐
- linux 操作系统级别监控 iostat 命令
iostat命令可以查看当前机器磁盘io的数据 命令:iostat -x -k 1 -x:展示磁盘的扩展信息 -k:以k为单位展示磁盘数据 1:每1秒刷新一次 展示结果 util:磁盘IO使用率,单位 ...
- 【全网首创】修改 Ext.ux.UploadDialog.Dialog 源码支持多选添加文件,批量上传文件
公司老框架的一个页面需要用到文件上传,本以为修改一个配置参数即可解决,百度一番发现都在说这个第三方插件不支持文件多选功能,还有各种各样缺点,暂且不讨论这些吧.先完成领导安排下来的任务. 任务一:支持多 ...
- [DE] ML on Big data: MLlib
Pipeline的最终目的就是学会Spark MLlib,这里先瞧瞧做到心里有数:知道之后要学什么,怎么学. 首要问题 一.哪些机器学习算法可以并行实现? 四类算法:分类.回归.聚类.协同过滤 以及特 ...
- 【linux】【NodeJs】Centos7安装node-v10.16.3环境
前言 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. https://node ...
- 常用HBase操作
HBase是一个分布式.面向列的数据库,可以用来存储非结构化和半结构化的松散数据,具有高可靠.高性能.面向列.可伸缩的特性.通过行键(RowKey).列族(ColumnFamily).列(Column ...
- Jetpack系列:LiveData入门级使用方法
Android APP开发中,开发者们都想有一个公共的组件,可以实现后台数据的监听,同时实时更新到UI进行显示,从而大大简化开发过程.Google针对这一开发需求,提供了Jetpack LiveDat ...
- Jquery toastr提示框
toastr是一个基于JQuery的消息提示插件; 1. 下载toastr和jquery https://jquery.com/download/ https://codeseven.github.i ...
- 杭州蓝松科技---短视频SDK介绍
蓝松短视频的口号和 更新周期: 我们的口号是: 蓝松短视频 任意个性化. 我们是杭州蓝松科技, 专业做视频短视频SDK的技术团队. 我们提供 Android/IOS平台上的 短视频编辑SDK, ...
- uC/OS-III 软件定时器(三)
软件定时器是uC/OS 操作系统的一个内核对象,软件定时器是基于时钟节拍和系统管理创建的软件性定时器,理论上可以创建无限多个,操作简单,但精准度肯定比硬件定时稍逊一筹. 原理和实现过程 要用到的函数: ...
- git clone 解决Permission Denied (publickey)问题
本地git bash 使用git clone git@github.com:***.git方式下载github代码至本地时需要依赖ssh key,遇到权限不足问题时一般都是SSH key失效或者SSH ...