自动化构建工具gulp的基础了解
1.使用gulp的步骤
1.安装node
检测是否安装好 cmd->node -v
2.安装gulp 可以在npm或者在cnpm
3.在node里面有个文件package.json.利用命令行npm init
4.本地安装插件,在这个文件夹中,直接在npm下载下来
5.在文件夹中新建一个gulpfile.js(名字必须是这个),其他的代码都是写在这个xxx.js的文件中的
2.基本语法
gulp.task("defult",function(){
return gulp.src(源文件夹)
.pipe(插件名称())
.pipe(插件名称())
.pipe(gulp.dest(目标文件夹))
});
gulp.task("min",function(){
return gulp.src(源文件夹)
.pipe(插件名称())
.pipe(插件名称())
.pipe(gulp.dest(目标文件夹))
});
//gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
gulp的基础语法
1.gulp.task('任务名称',‘依赖任务’,函数);
注意:依赖任务并行执行,然后运行任务名称
2.gulp.src()
3.gulp.dest()
4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化,然后运行指定的Tasks或者函数,
3.运行gulp
gulp 任务名称
4.为什么采用gulp
gulp和grunt的区别
gulp 基于流 配置优先 1000+插件
grunt 基于文件 代码优先 3900+插件
这个相比Grunt需要使用插件,gulp本身就支持的很好。
其他的就是练习就成了!!!
自动化构建工具gulp的基础了解的更多相关文章
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
- 前端自动化构建工具 Gulp 使用
一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装No ...
- 前端自动化构建工具--Gulp&&Webpack
前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- 基于流的自动化构建工具------gulp (简单配置)
项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...
- 前端自动化构建工具-gulp
gulp 和grunt这两个是我知道的自动构建工具,但是说实话都没在项目中用过,不太清楚自动化构建是什么意思, 1.grunt和gulp有什么相同点和不同点? (1).易于使用:采用代码优于配置策略, ...
- 前端自动化构建工具——gulp环境搭建教程
gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...
- 自动化构建工具gulp简单介绍及使用
一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ...
随机推荐
- 未能写入输出文件 “c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\6ee8fd15\5fc973dd\App_Web_default.aspx.cdcab7d2.e1voeq0d.dll”--“拒绝访问
在本地开发环境没问题,但是发布到服务器出现:未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Fil ...
- 空字符串‘’ null false 区别
1.''空字符串 .null 和false都是以值为0来存储的 只是数据结构不一致而已 空字符串------字符串数据格式 null -----------null数据格式 false ----- ...
- jsp内置对象request的使用方法
<%@page import="java.text.SimpleDateFormat"%> <%@page import="java.util.Date ...
- C.0689-The 2019 ICPC China Shaanxi Provincial Programming Contest
We call a string as a 0689-string if this string only consists of digits '0', '6', '8' and '9'. Give ...
- 洛谷P2812校园网络【Network of Schools加强版】
题目背景 浙江省的几所\(OI\)强校的神犇发明了一种人工智能,可以\(AC\)任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被\(♂\)掏\(♂\)空,他 ...
- CSS十一问——好奇心+刨根问底=CSSer
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- aspnetcore的中间件
Run会终止中间件继续传递 app.Run(new RequestDelegate(async context => { await Task.Run(() => { context.Re ...
- Win10文件无法重命名
适用版本:Win10 Lenovo ideapad 310s 方法一:禁用所有开机启动项,重启 方法二:进入安全模式测试 方法三:新建一个账户
- python 多继承(新式类) 四
转载自:http://blog.sina.com.cn/s/blog_45ac0d0a01018488.html mro即method resolution order,主要用于在多继承时判断调的属性 ...
- mysql日常使用总结(持续更新中)
记录一些日常的mysql常用的使用, 方便随用随查. 一.表结构 1.1 查看表结构 方式1: 可以查看建表语句,完整的表结构. show create table table_name; 方式2:可 ...