自动化构建工具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是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ...
随机推荐
- js 把字符串变成函数
js 把字符串变成函数 eval("(" + fieldEventss[1]+")");
- python下一个转码的问题
我想把一个quoted的字符串经过unquote处理后,打印出来.被unquote处理后的字串应该是utf-8的,因此还需要按照utf-8再做一次解码,代码如下: import urllib im ...
- THE WAY TO HACKER
1/编程篇88课时(预计三个月) 此阶段主要侧重于培养学员发现问题的能力,并对各大平台各个操作系统有一个整体性认知,迅速建立起较高的计算机素养,并形成对于信息安全核心思想的初步探索及认知,为后续专项课 ...
- openstack RPC通信
openstack RPC通信 OpenStack 的主要组件有 Nova.Cinder.Neutron.Glance 等,分别负责云平台的计算.存储.网络资源管理.openstack 各组件之间是通 ...
- 浅析HTTP协议get请求与post请求
一.HTTP简介 1. HTTP协议:(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则(报文格式). 2.报文: ...
- AOP分析
cglib动态代理 Waiter target = new NaiveWaiter();//一个实现了Waiter接口的类 BeforeAdvice advice = new GreetingBefo ...
- BZOJ 4264 小C找朋友 哈希+脑子
好吧我觉得是脑子,别人觉得是套路$qwq$ 这道题相当于是求除了$u,v$两点互相连接,所连的点相同的点对$(u,v)$ 我们首先每个点一个随机权值,对于$u$点记为$w[u]$,然后记与$u$点相连 ...
- JD孔_20160920
1. 2. 3.
- 牛客网Java刷题知识点之匿名对象
不多说,直接上干货! 匿名对象的两种用途: 1.当对象对方法仅进行一次调用的时候,就可以简化成匿名对象. 2.匿名对象可以作为实际参数进行传递. 匿名对象顾名思义就是没有名字的对象. new Car( ...
- 《从0到1学习Flink》—— Flink 项目如何运行?
前言 之前写了不少 Flink 文章了,也有不少 demo,但是文章写的时候都是在本地直接运行 Main 类的 main 方法,其实 Flink 是支持在 UI 上上传 Flink Job 的 jar ...