gulp

简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得配置node环境

Install npm install gulp-cli -g 全局安装gulp gulp --help 返回帮助信息

package.json npm init 初始化npm npm install gulp gulp-util --save-dev //从本地把整个gulp文件夹拉过来

task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello', function () { console.log('hello'); }); gulp.task('default',['hello']);

basic gulp.src()找出想要处理的文件 .pipe()通过pipe()去处理找出来的文件,可以理解为管道 .pipe(gulp.dest())处理好的文件放到指定地方

复制html文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src('./index.html').pipe(gulp.dest('./xiangmu/dist')); });

复制img文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src('./img/*.{jpg,png}').pipe(gulp.dest('./xiangmu/dist')); });

引用其他多个目录中的文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src(['a/.html','b/.html']).pipe(gulp.dest('./xiangmu/dist')); });

排除其它的文件 var gulp=require('gulp'); gulp.task('hello', function () { return gulp.src(['./a/*','!./a/a.less']).pipe(gulp.dest('./xiangmu/dist')); });

同时执行几个任务 gulp.task('build',['myhtml','mycss'], function () { console.log('aaaaaaaaa'); });

监听任务 gulp.task('watch', function () { gulp.watch('a/*',['hello']); });

使用插件来扩展gulp的功能 Sass插件 npm install gulp-sass --save-dev gulp.task('mysass', function () { return gulp.src('*.scss') .pipe(sass()) .pipe(gulp.dest('./xiangmu/cc')) });

less插件 npm install gulp-less --save-dev gulp.task('myless', function () { return gulp.src('./a/*.less').pipe(less()).pipe(gulp.dest('./xiangmu/less')); });

构建服务器 npm install gulp-connect --save-dev gulp.task('server', function () { connect.server({ root:'dist' }); });

浏览器实时刷新 npm install gulp gulp-livereload --save-dev 在server服务中添加livereload:true(启动实时刷新的功能) 在要实现刷新的文件中添加.pipe(connect.reload())

合并文件 npm install gulp-concat --save-dev gulp.task('myjs', function () { return gulp.src(['js/a.js','js/b.js']).pipe(concat(‘ab.js’)).pipe('./xiangmu/js'); });

Js压缩文件 npm install gulp-uglify --save-dev gulp.task('uglifyjs', function(){ gulp.src('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js')) });

Css文件压缩 npm install gulp-minify-css --save-dev npm install gulp-clean-css --save-dev

cssmin = require('gulp-minify-css'); gulp.task('myminifycss', function () { gulp.src('css/*.css') .pipe(cssmin()) .pipe(gulp.dest('dist/css')); }); html文件压缩 npm install gulp-minify-html --save-dev

minifyHtml = require("gulp-minify-html"); gulp.task('myminifyhtml', function () { gulp.src('*.html') // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest('dist/html')); }); 重命名 npm install gulp-rename --save-dev .pipe()

图片优化 npm install gulp-imagemin --save-dev .pipe()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏13blog.site

IntelliJ IDEA 报错:Error:java: 未结束的字符串文字

构建javaweb项目时,控制台报错: ? 这个问题是由于编码冲突导致的,在设置中找到File Encodings可以看到 ? ide采用utf-8编码格式,而...

3005
来自专栏散尽浮华

zabbix监控主机cpu达到80%后报警

在zabbix监控中,默认cpu监控模板中的触发器,当负载在一定时间内(比如最近5分钟)超过5以上为报警阀值。但是在实际场景中,由于服务器配置不一样,这个默认的...

3516
来自专栏别先生

mysql输入密码后闪退怎么办?

第一: 首先需要想到的是mysql的服务可能没开,首先打开mysql的服务 ? 第二: 打开Mysql的命令行输入密码即可 ? 第三: 登录成功 ? 第四: 顺...

2339
来自专栏Brian

Install Python3.6.x on CentOS7

---- 概述 在之前的文章中,我已经介绍了在CentOS6中安装Python2.7.x和Python3.4.x。请参考源码编译安装或者升级Python在Cen...

8546
来自专栏老司机的技术博客

docker实战入门(2)在linux下安装docker

ubuntu下软件的安装方式一般是apt-get ,但是由于ubuntu维护的docker版本较久,所以我们建议安装docker官方维护的最新版本。

84023
来自专栏Linyb极客之路

linux常用基本命令之文件搜索命令

命令:find 语法:find [搜索范围路径] -name 【文件名称】(根据文件名查找) find [搜索范围路径] -size [...

3966
来自专栏自由而无用的灵魂的碎碎念

让IE的地址栏在弹出窗口也显示

相信web开发人员经常使用到浏览器的地址栏,通过跟踪页面的地址来查看页面的源代码。

903
来自专栏恒思考

实现app配置服务

我们要做一个app首先要实现后端,打算做个app叫恒思考。这个app后台由leancode,firebase,自建parse服务器。防止某个服务器不可用以后导致...

2663
来自专栏深度学习之tensorflow实战篇

python django整理(二)路由设置(URLS)

3步初识ursl与views之间的作用原理 视图函数相关的URL(网址) (访问啥网址对应啥内容) 1、打开app01/views.py文件,输入下列代码: ...

3406
来自专栏行者悟空

Apache Zookeeper集群搭建(简化版)

1362

扫码关注云+社区

领取腾讯云代金券