-
Gulp介绍
gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器
能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的
合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务gulp更高效(异步多任务), 更易于使用, 插件高质量
安装 nodejs, 查看版本: node -v
-
创建一个简单的应用gulp_test
|- dist |- src |- js |- css |- less |- index.html |- gulpfile.js-----gulp配置文件 |- package.json "name": "gulp_test", "version": "1.0.0"
-
安装gulp:
-
全局安装gulp
npm install gulp -g
-
局部安装gulp
npm install gulp --save-dev
-
配置编码: gulpfile.js
//引入gulp模块 var gulp = require(‘gulp‘); //定义默认任务 gulp.task(‘任务名‘, function() // 将你的任务的任务代码放在这 ); gulp.task(‘default‘, [‘任务‘])//异步执行
-
构建命令:
gulp
-
-
使用gulp插件
-
相关插件:
gulp-concat : 合并文件(js/css)
gulp-uglify : 压缩js文件
gulp-rename : 文件重命名
gulp-less : 编译less
gulp-clean-css : 压缩css
gulp-livereload : 实时自动编译刷新
-
重要API
-
gulp.src(filePath/pathArr) :
指向指定路径的所有文件, 返回文件流对象
用于读取文件
-
gulp.dest(dirPath/pathArr)
指向指定的所有文件夹
用于向文件夹中输出文件
-
gulp.task(name, [deps], fn)
定义一个任务
-
gulp.watch()
监视文件的变化
-
-
处理js
-
创建js文件
-
src/js/test1.js
(function () function add(num1, num2) var num3 = 0; num1 = num2 + num3; return num1 + num2; console.log(add(10, 30)); )();
-
src/js/test2.js
(function () var arr = [2,3,4].map(function (item, index) return item+1; ); console.log(arr); )();
-
-
下载插件:
npm install gulp-concat gulp-uglify gulp-rename --save-dev
-
配置编码
var concat = require(‘gulp-concat‘); var uglify = require(‘gulp-uglify‘); var rename = require(‘gulp-rename‘); gulp.task(‘minifyjs‘, function() return gulp.src(‘src/js/*.js‘) //操作的源文件 .pipe(concat(‘built.js‘)) //合并到临时文件 .pipe(gulp.dest(‘dist/js‘)) //生成到目标文件夹 .pipe(rename(suffix: ‘.min‘)) //重命名 .pipe(uglify()) //压缩 .pipe(gulp.dest(‘dist/js‘)); ); gulp.task(‘default‘, [‘minifyjs‘]);
-
页面引入js浏览测试 : index.html
<script type="text/javascript" src="dist/js/built.min.js"></script>
打包测试: gulp
-
-
处理css
-
创建less/css文件
-
src/css/test1.css
#div1 width: 100px; height: 100px; background: green;
-
src/css/test2.css
#div2 width: 200px; height: 200px; background: blue;
-
src/less/test3.less
@base: yellow; .index1 color: @base; .index2 color: green;
-
-
下载插件:
npm install gulp-less gulp-clean-css --save-dev
-
配置编码
var less = require(‘gulp-less‘); var cleanCSS = require(‘gulp-clean-css‘); //less处理任务 gulp.task(‘lessTask‘, function () return gulp.src(‘src/less/*.less‘) .pipe(less()) .pipe(gulp.dest(‘src/css‘)); ) //css处理任务, 指定依赖的任务 gulp.task(‘cssTask‘,[‘lessTask‘], function () return gulp.src(‘src/css/*.css‘) .pipe(concat(‘built.css‘)) .pipe(gulp.dest(‘dist/css‘)) .pipe(rename(suffix: ‘.min‘)) .pipe(cleanCSS(compatibility: ‘ie8‘)) .pipe(gulp.dest(‘dist/css‘)); ); gulp.task(‘default‘, [‘minifyjs‘, ‘cssTask‘]);
-
页面引入css浏览测试 : index.html
<link rel="stylesheet" href="dist/css/built.min.css"> <div id="div1" class="index1">div1111111</div> <div id="div2" class="index2">div2222222</div>
打包测试: gulp
-
-
处理html
-
下载插件:
npm install gulp-htmlmin --save-dev
-
配置编码
var htmlmin = require(‘gulp-htmlmin‘); //压缩html任务 gulp.task(‘htmlMinify‘, function() return gulp.src(‘index.html‘) .pipe(htmlmin(collapseWhitespace: true)) .pipe(gulp.dest(‘dist‘)); ); gulp.task(‘default‘, [‘minifyjs‘, ‘cssTask‘, ‘htmlMinify‘]);
-
修改页面引入
<link rel="stylesheet" href="css/built.min.css"> <script type="text/javascript" src="js/built.min.js"></script>
打包测试: gulp
-
-
自动编译
-
下载插件
npm install gulp-livereload --save-dev
-
配置编码:
var livereload = require(‘gulp-livereload‘); //所有的pipe .pipe(livereload()); gulp.task(‘watch‘, [‘default‘], function () //开启监视 livereload.listen(); //监视指定的文件, 并指定对应的处理任务 gulp.watch(‘src/js/*.js‘, [‘minifyjs‘]) gulp.watch([‘src/css/*.css‘,‘src/less/*.less‘], [‘cssTask‘,‘lessTask‘]); );
-
热加载(实时加载)
-
下载插件:gulp-connect
1、 npm install gulp-connect --save-dev 2、 注册 热加载的任务 server,注意依赖build任务 3、注册热加载的任务 //配置加载的选项 connect.server( root : ‘dist/‘,//监视的源目标文件路径 livereload : true,//是否实时刷新 port : 5000//开启端口号 ); // 自动开启链接 open(‘http://localhost:5000‘);//npm install open --save-dev // 监视目标文件 gulp.watch(‘src/js/*.js‘, [‘js‘]); gulp.watch([‘src/css/*.css‘, ‘src/css/*.less‘], [‘cssMin‘, ‘less‘]);
-
-
扩展
打包加载gulp插件
前提:将插件下载好。
下载打包插件: gulp-load-plugins
npm install gulp-load-plugins --save-dev
引入: var $ = require(‘gulp-load-plugins‘)();!!!引入的插件是个方法,必须记住调用。
神来之笔:其他的插件不用再引入了
-
使用方法:
* 所有的插件用 $ 引出,其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分):如:concat,connect,cssmin... gulp.task(‘less‘, function () return gulp.src(‘src/less/*.less‘) .pipe($.less())//将less转换为less .pipe(gulp.dest(‘src/css/‘))//将转换为less的文件输出到src下 .pipe($.livereload())//实时刷新 .pipe($.connect.reload()) );
-
-
关键词:
爆肝六万字整理的python基础,快速入门python的首先(代码片段)
文章目录1环境安装2Python的第一程序HelloWorld3变量定义和类型3.1什么是变量。3.2变量的类型3.3变量的命名规则3.4常用的数据类型转换4注释4.1单行注释4.2多行注释4.3编码5输入输出5.1输入5.2输出5.2.1格式化输出6运算符7判断语句7.1if语... 查看详情
sass入门及知识点整理(代码片段)
Sass快速入门|SASS中文网文档链接:https://www.sasscss.com/getting-started/ 前言之前整理了一篇关于Less的,现在就来整理一下关于Sass的。因为这两种都是CSS的主流预处理器,当然还有Stylus。 要解释一下什么是Sass吗?Sass和Less一样... 查看详情
vue项目快速入门(代码片段)
文章目录说明下载Node.jsnpm配置项目构建安装vue-cli创建应用项目结构Vue项目的特点(webpack)使用webpackVue路由路由使用基本架构路由嵌套传递参数方式一方式二重定向路由模式&404处理钩子函数总结说明此部分为自行整理下载... 查看详情
git常用操作入门(基于bash命令快速入门)(代码片段)
序言写这篇文章的时候我正好需要用Git作为版本控制,而且将会用到大量的分支以及操作。最恐怖的是,之前都用SourceTree作为Git的图形化界面工具,一直没有好好地用GitBASH。这次基本上都是通过在BASH上面操作(... 查看详情
glup入门
本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子。什么是gulpgulp的官方定义非常简洁: 基于文件流的构建系统 。这里强调了streaming,... 查看详情
10张脑图带你快速入门vue3|附高清原图(代码片段)
...ff1a;基础部分我将所有内容吸收整理成10张脑图,一来快速入门Vue3,二来方便以后查看脑图应用实例和组件实例1应用实例和组件实例.png模板语法2模板语法.png配置选项3配置选项.png计算属性和监听器4计算属性和监听器.png... 查看详情
shgdb快速入门(代码片段)
javagcm快速入门(代码片段)
pythongooglecalendarapipython快速入门(代码片段)
json快速入门(代码片段)
❤️万字python基础保姆式教学❤️,小白快速入门python!(代码片段)
前言又是爆肝干文的日子,继上次说要出一期Python新手入门教程系列文章后,就在不停地整理和码字,终于是把【基础入门】这一块给写出来了。高级编程的【正则表达式】和【面向对象编程】内容我在之前已经出过... 查看详情
❤️万字python基础保姆式教学❤️,小白快速入门python!(代码片段)
前言又是爆肝干文的日子,继上次说要出一期Python新手入门教程系列文章后,就在不停地整理和码字,终于是把【基础入门】这一块给写出来了。高级编程的【正则表达式】和【面向对象编程】内容我在之前已经出过... 查看详情
javascript表格快速入门(代码片段)
markdownangular2快速入门(代码片段)
markdownelasticsearch,快速入门,码头工具(代码片段)
markdown快速+graphql入门体验(代码片段)
学写网站前端配置之glup(代码片段)
前端使用gulp来自动化开发流程。gulp会非常方便进行前端管理。安装gulp:npminstallgulp-g#将gulp安装至全局因为在本地需要使用require的方式gulp。因此也需要在本地安装一份:npminstallgulp--save-dev #将gulp安装至本地,并保存至package.... 查看详情
uwsgi快速入门(代码片段)
目录uwsgi快速入门一、概述1、简单介绍2、环境配置二、第一个WSGI应用1、运行2、添加并发三、结合Web服务器使用1、Flask2、Django3、Nginx配置uwsgi快速入门一、概述1、简单介绍WSGI(WebServerGatewayInterface),定义了web服务器(nginx、apa... 查看详情