自动化构建工具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是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ...
随机推荐
- ADO.Net事务处理
SQL Server中的事务可以将多个数据库增删改查操作合并为单个工作单元,在操作过程中任何部分出错都可以滚回已经执行的所有更改.ADO.Net中也提供了事务处理功能,通过ADO.net事务,可以将多 ...
- Mysql分片后分页排序拉取数据的方法
高并发大流量的互联网架构,一般通过服务层来访问数据库,随着数据量的增大,数据库需要进行水平切分,分库后将数据分布到不同的数据库实例(甚至物理机器)上,以达到降低数据量,增加实例数的扩容目的. 一旦涉及 ...
- PyCharm专业版安装(2018年Windows版)
友情提示: 本教程仅供学习交流使用,如需商业用途,强烈建议使用官方正式版.(官网正式链接为:https://www.jetbrains.com/pycharm/) 当然网上有很多其他激活教程,我看到的 ...
- HDU2048 神、上帝以及老天爷
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2048 看书发现了这道题,刚开始没理解题意,以为是中奖的概率,---> 1/n 后来知道了是典型的错排 ...
- maven项目跳转页面报空指针错误 Servlet.service() for servlet 异常
Servlet.service() for servlet jsp threw exceptionjava.lang.NullPointerExceptionat org.jaronsource.ms ...
- (二)异步解决方案之callback
回调定义 就是一个函数里面使用 作为参数的函数. Function1(Function2) { Function2(); }; 同步调用 - 老实说,这和我们 不将代码封装成 函数没有差别 也就是说 ...
- Java中keytool管理证书
1.创建证书库以及第一个证书 keytool -genkeypair -alias "wangpass" -keyalg "RSA" -keystore &qu ...
- 【JavaScript权威指南】——逻辑与(&&)
三种用法总结: 1.布尔值计算: [成员]={false,true} 2.“真值”,“假值”计算: [假值]={false,null,undefined,0,-0,NaN,""} ...
- (6)ASP.NET Core 中使用IHttpClientFactory发出HTTP请求
1.HttpClient类使用存在的问题 HttpClient类的使用所存在的问题,百度搜索的文章一大堆,好多都是单纯文字描述,让人感觉不太好理解,为了更好理解HttpClient使用存在的问题,下面 ...
- 利用rand7()构造rand10()
题意 已知有个rand7()的函数,返回1到7随机自然数,让利用这个rand7()构造rand10() 随机1~10 参考代码 int rand7() { srand((int)time(NULL)) ...