grunt使用

grunt :插件生态完善，但是工作过程基于临时文件完成，对磁盘读写造作较多，速度慢
gulp:内存中完成构建，速度快，默认支持同时执行多个任务
fis:大而全，规范化

grunt标记任务

grunt使用

默认同步执行，异步操作通过this.async()实现
空项目添加pakage.json
yarn init
下载grunt依赖生成yarn.lock文件
yarn add grunt
创建grunt入口文件
code gruntfile.js
cls
yarn grunt (foo[任务名称])[不写名字，默认任务]

grunt标记任务方法：

grunt.registerTask(‘name任务名’,()=>{})

grunt配置任务

grunt配置任务属性

grunt.initConfig({
属性名【任务名】：属性值【允许为对象】
})
grunt.registerTask(‘任务名名’，()=>{【获取任务】
grunt.config(‘任务名.属性名’)【获取任务属性】
})

grunt多目标配置任务

配置grunt多目标任务相当于给同一个任务配置多个子任务【一个对象配置多个属性】
grunt.initConfig({
任务名：{
属性名1：属性值1，
属性名2：属性值2,
options[可选任务]：{
属性名3：属性值3
}
}
})
grunt.registerMultiTask(‘任务名’，function(){
console.log(this.options)
console.log(target:${this.target},data:${this.data})
})

grunt常用插件

grunt-contrib-clean:清除目标文件

yarn add grunt-contrib-clean 安装插件
grunt.loadNpmTasks（‘插件名’）导入插件
grunt.initConfig({clean:‘目标文件路径’}) 创建clean任务
yarn grunt clean 运行clean任务

grunt-sass：复制目标文件到【新建】指定路径

yarn grunt-sass sass --dev 安装sass模块【多目标任务】
grunt.loadNpmTasks(‘grunt-sass’) 导入模块
files:{【新文件:旧文件】}
implementation:sass
yarn grunt sass 运行

grunt-babel：转换ES最新特性

yarn add grunt-babel @babel/core @ babel/preset-env --dev 安装模块
yarn add load-grunt-tasks 安装grunt-task 模块，自动加载grunt任务插件；
lodaGruntTasks(grunt)代替grunt.lodaNpmTasks(‘插件名’)
preset配置
yarn grunt babel运行

grunt-contrib-watch:监听目标文件，发生变化，执行目标任务

yarn add grunt-contrib-watch --dev 安装模块
files:目标文件；task:目标任务
yarn grunt watch 运行

自动化构建工作流--grunt相关推荐

大前端学习--开发脚手架与自动化构建工作流封装
开发脚手架与自动化构建工作流封装去年6月24号开始工作,到今天刚好一周年了,纪念一下,分享最近学习的前端工程化笔记. 一.前端工程化前端工程化是指遵循一定的标准和规范,通过工具去提高效率.降低成本 ...
开发脚手架及封装自动化构建工作流
前端工程化概述 1.多人协作开发,无法硬性统一大家的代码风格从仓库中pull回来的代码质量无法保证 2.部分功能开发时需要等待后端服务接口提前完成 3.传统语言或语法的弊端 4.无法使用模块化/组 ...
自动化构建工具Grunt、Gulp
使用grunt完成项目的自动化构建一.准备工作 grunt快要退出历史舞台了,简单学习下 mkdir my-grunt yarn init --yes //创建package模块 yarn add ...
前端自动化构建工具Grunt
一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工 ...
浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读前端自动化构建基本介绍一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
常用的前端自动化构建工具gulp/grunt/fis --简介
常用的前端自动化构建工具之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力,那么我们会了解 Gulp Grunt fIS 用法基本相同:都是通过 ...
开发脚手架与自动化构建
一.前端工程化概念:遵循一定的标准和规范,通过工具去提高效率,降低成本的一种手段 1.遇到的主要问题想要使用ES6+新特性,但是兼容有问题想要使用Less/Sass/PostCSS增强CSS的编 ...
前端工程化——脚手架及自动化构建
定义一切以提高效率.降低成本.质量保证为目的的手段,都属于工程化前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复性的机械工作代码风格统一.质量保证依赖后端服务接口的 ...
前端工程化实战 - 自动化构建工具
文章目录一.自动化构建简介二.自动化构建初体验 2.1 场景描述 2.2 实际操作体验三.常用的自动化构建工具 3.1 Grunt 3.2 Gulp 3.3 FIS 四.自动化构建工具 Grun ...
打包node服务端_如何基于NodeJS从零构建线上自动化打包工作流？
前言 NodeJS在前端领域正扮演着越越重要的地位,它不仅可以让前端工作者使用javascript编写后端代码,还能方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动,非阻塞I/O ...

自动化构建工作流--grunt

grunt使用

grunt标记任务

grunt配置任务

grunt多目标配置任务

grunt常用插件

grunt-contrib-clean:清除目标文件

grunt-sass：复制目标文件到【新建】指定路径

grunt-babel：转换ES最新特性

grunt-contrib-watch:监听目标文件，发生变化，执行目标任务

自动化构建工作流--grunt相关推荐

最新文章

热门文章