前端构建工具grunt学习笔记

zone 发布于2019-08-21 10:42 / 1176人阅读

使用grunt实时编译less文件 下图是项目的文件组织

生成package.json文件，通过npm init命令。

安装你需要的Devdependencies/denpendencies。

npm install grunt --save-dev

npm install load-grunt-tasks --save-dev

npm install time-grunt --save-dev

npm install grunt-contrib-watch --save-dev

npm install grunt-contrib-less --save-dev

npm install grunt --save

GruntFile.js配置

    "use strict";
    
    module.exports = function(grunt){
        require("time-grunt")(grunt);
        require("load-grunt-tasks")(grunt);
        
        grunt.initConfig({
            less: {
                build: {
                    expand: true,
                    cwd: "less/",
                    src: "["*.less"]",
                    dist: "css/",
                    ext: ".css"
                }
            },
            
            watch: {
                files: ["less/**/*.less"],
                tasks: ["default"]
            }
        });
        
        grunt.registerTask("default", ["less"]);
    }

grunt.initConfig()里面传入对象

每一个字段名代表一个task

task里面的内容为target目标

在less这个task里面：

expand: true 开始动态编译

cwd: "less/" 所有的"src"里指定文件都是相对于这个属性指定的路径

src: ["*.less"] 相对与cwd路径下需要匹配的文件，这个地方是匹配所有的less文件

dest: "css/" 生成目标文件的路径

ext: ".css" 替换所有生成的目标文件的后缀为这个属性

在watch这个task里面：

files:["less/**/*.less"] 表示监听less文件夹下，所有less文件，以及所有目录下的less文件

tasks: ["default"] 表示当上面被监听的文件发生变化的时候会执行这个任务

grunt.registerTask("default", ["less"]) //注册"default"，里面包含"less"任务

在html文件里面引入less文件

启动grunt任务

打开命令行窗口，输入 grunt watch

这条命令就表示启动grunt的task(watch),因为在task(watch)里面配置了tasks，即表示当监听的文件发生变化的时候会执行default任务

这时候你在index.less文件里面做出的修改命令行都出实时编译为css，放心刷新浏览器就好了

使用编辑器自带的编译功能

webstorm有自带的less/sass编译功能，也可以进行相应的配置进行less文件的实时编译

云服务器 GPU云服务器前端构建构建工具 android构建工具自动化构建工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86044.html

Yeoman,bower,Grunt的安装

摘要：安装成功的验证方式中输入如果输出版本号就说明没有问题。这里再提一点，因为国内的某些原因，通过安装工具可能会非常慢，这里需要我们做一点修改，也就是使用淘宝镜像。最近看视频学习了前端自动化的一些知识，确实让我大开眼界。感觉前端越来越神器了。同时跟着视频自己也尝试运用了一些工具去构建前端项目，但是中间遇见了很多坑，磕磕绊绊的才实现了一点功能，所以打算记录一下学习过程中的笔记。首先列举一下...

AZmake 2019-08-20 16:02 评论0 收藏0
“流式”前端构建工具——gulp.js 简介

摘要：流式构建改变了底层的流程控制，大大提高了构建工作的效率和性能，给用户的直观感觉就是更快。我的看法关于流式构建，短短几句话无法讲清它的来龙去脉，但是在的世界里，确实是至关重要的。 Grunt 一直是前端领域构建工具（任务运行器或许更准确一些，因为前端构建只是此类工具的一部分用途）的王者，然而它也不是毫无缺陷的，近期风头正劲的 gulp.js 隐隐有取而代之的态势。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 评论0 收藏0
gulp和webpack初探

摘要：首先声明一下，和两者关系不大，主要是团队之前一直用构建工具，这几天业务上比较清闲，老大让我学学新的和这些潮流工具，于是草草研究了一天，记一些笔记。最后使用将各个组件打包在一起。首先声明一下，gulp和webpack两者关系不大，主要是团队之前一直用grunt构建工具，这几天业务上比较清闲，老大让我学学新的gulp和webpack这些潮流工具，于是草草研究了一天，记一些笔记。 gulp...

jhhfft 2019-08-19 18:40 评论0 收藏0
webpack学习笔记1

摘要：头部资源终将占据统治地位，成为前端项目构建工具的头部资源。模块化编程模块的概念是将程序拆解为离散的功能块，通常称这些功能块为模块。模块相对于程序而言，具有更小的体积，单个模块具有清晰的目的，方便进行开发测试维护等工作。 webpack作用 webpack可以将前端工程中所有的静态资源打包成为一个或者多个js，静态资源包括css、图片等。为什么要使用webpack，没有打包工具之前，页...

legendaryedu 2019-08-23 13:46 评论0 收藏0
[ 前端实习日记 ] 构建静态页面基础架构

以前我们敲静态页面都是写好html，css, js，然后再去刷新浏览器，艾尼马又不行，有重新写过再刷新，一个页面下来按chrl+r的次数可让你的键盘多活好几天，要不会刷新快捷按钮那不得手残了都。后来，grunt,gulp等工具应运而生，当然它们不止这个功能，但却很好地减轻了我们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是个人的目前在用的不成熟的方案，更专业的还请参考...

lidashuang 2019-08-21 10:35 评论0 收藏0