一个完整的项目中,需要的基本gulp
一个完整的项目需要使用gulp的多种功能,包括——
(1)加载各种需要的插件
var concat=require('gulp');
var clean=require(''gulp);
等等。需要的插件放在指定的module文件夹下面,然后再修改文件中修改。
(2)启动任务和完成部署任务
我们想要在文件进行操作之前,首先将文件的环境弄好,例如,想把a放在一个目录下,但是这个目录下面有着很多的不需要的文件,所以我们首先需要将这些文件删除——
gulp.task('cleanTask',function(){
return gulp.src(dist).pipe(clean())
})
注意到里面的dist是一个变量,所以在这之前我们还必须对变量进行声明——
var dist=__dirname+'/dist'
代表根目录下的dist文件
然后执行更新操作:
gulp.task("default",['release'],function(){
gulp.run('autoupdateSource')
});
执行这个会自动执行,autoupdateSource任务,而执行这个之前,还会先执行release。
gulp.task("release",function(){
gulp.run('html');
gulp.run('transformless');
gulp.run('img');
gulp.run('js");
})
这个任务会依次执行里面的其他4个任务,目的是将src目录下的所有文件全部拷贝同步到dist文件下面。
gulp.task("html",function(){
gulp.src("src/*.html") //找到原本的路径
.pipe(minifyHtml()) //对html进行压缩工作,这是需要插件的
.pipe(gulp.dest(dist)) //目标目录
.pipe(browserSync.reload({stream:true}));//当监听到html文件发生变动时,执行同步更新操作
gulp.task('img',function(){
gulp.src('src/**/*',option)//以option,为根目录,将文件连同文件夹完整搬运过去,若没有这个option,便会导致所有文件全部放在路径下面,失去层次。为此,这个option也需要事前声明
.pipe(gulp.dest(dest))
})
})
var option = {base: 'src'}; //基准目录从src目录开始
gulp.task("js", function(){
gulp.src("src/js/**/*", option).pipe(gulp.dest(dist))
})
以及,这个部分重要的less部分——
gulp.task('transformLess',function(){
gulp.src('src/style/**/*.less',option)//选择源文件目录
.pipe(less()) //将文件夹下面的less文件转换成css文件,浏览器不识别less,且这个时候收获的并不是一个css而是多个转化而成的css文件。
.pipe(autoprefixer()) //自动匹配前缀,轻松解决flex的兼容问题
.pipe(gulp.dest(dest)) //目的目录,这个操作会将css文件全部输送过去,注意,这里是【多个css文件】
.pipe(concat('index_all.css')) //将多个css文件合并
.pipe(minfy()) //对css进行压缩,一个减小体积,另一个增大读取难度,因为并不是给用户看的
.pipe(gulp.dest(dist+'/style')) //转换好的【一个】css文件放在对应目录下
.pipe(browserSyn.reload({stream:true})) //和浏览器保持同步更新
})
到此为止,我们完成了——文件的搬运和转换和浏览器的同步更新,接下来就是文件自身的同步更新,即——当我们修改工作区间的文件,会同时更改发布区的文件。
gulp.task('autoUpdateSource',function(){
gulp.watch('src/style/**/*.less',['transformLess']) //当目录下的所有less发生变化的时候,执行后面的任务,也就是上面写的同步更新less操作
gu;p.watch(''src/*.html",[''html"],function(){ //,先执行html任务,当目录下的html文件发生变化的时候,执行后面的函数
})
})
最后,则是窗口自动启动等问题,这些其实都是默认任务下的东西——
原来的default任务是这样的
gulp.task('cleanTask',function(){
return gulp.src(dist).pipe(clean())
})
而事实应该是这个样子的——
gulp.task('cleanTask',function(){
if(yargs.s){
gulp.start('sever')
}
if(yargs.w){
gulp.start('watch');
}
还记得我们使用git打开时输入的代码吗?
node node_modules/gulp/bin/gulp.js
后面加上-s或者-w就可以执行上面对应的任务——
node node_modules/gulp/bin/gulp.js -s
gulp.task('server',function(){
yargs.p=yargs.p||8080; //服务器端口
broswerSyn.init({
server:{
baseDir:"./dist" //文件打开路径,意味着打开8080端口下的dist文件夹
},
port:yars.p,
startPath:'./' //最终打开文件路径,在上述路径下面添加这里的路径,寻找index.html打开
})
})
至此,配置文件全部结束,完结撒花——————
我会将全部代码放在后面的。
return gulp.src(dist).pipe(clean())
})
一个完整的项目中,需要的基本gulp的更多相关文章
- asp.netmvc 三层搭建一个完整的项目
接下来用 asp.net mvc 三层搭建一个完整的项目: 架构图: 使用的数据库: 一张公司的员工信息表,测试数据 解决方案项目设计: 1.新建一个空白解决方案名称为Company 2.在该解决方案 ...
- 如何基于Spring Boot搭建一个完整的项目
前言 使用Spring Boot做后台项目开发也快半年了,由于之前有过基于Spring开发的项目经验,相比之下觉得Spring Boot就是天堂,开箱即用来形容是绝不为过的.在没有接触Spring B ...
- 写给笨蛋徒弟的学习手册(1)——完整C#项目中各个文件含义
Bin 目录用来存放编译的结果,bin是二进制binrary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin/R ...
- 分享一个集成在项目中的REST APIs文档框架swagger
1 为什么是使用swagger? 1-1 当后台开发人员开发好接口,是不是还要重新书写一份接口文档提给前端人员,当然对于程序员最不喜欢的就是书写文档(当然文档是必须的,有利于项目的维护) 1-2 当后 ...
- 【Android】 分享一个完整的项目,适合新手!
写这个app之前是因为看了头条的一篇文章:http://www.managershare.com/post/155110,然后心想要不做一个这样的app,让手机计算就行了.也就没多想就去开始整了. ...
- (续)使用Django搭建一个完整的项目(Centos7+Nginx)
django-admin startproject web cd web 2.配置数据库(使用Mysql) vim web/settings.py #找到以下并按照实际情况修改 DATABASES = ...
- 【vue2.x基础】用npm起一个完整的项目
1. 安装vue npm install vue -g 2. 安装vue-cli脚手架 npm install vue-cli -g 3. 安装webpack npm install webpack ...
- 一个完整的机器学习项目在Python中的演练(二)
大家往往会选择一本数据科学相关书籍或者完成一门在线课程来学习和掌握机器学习.但是,实际情况往往是,学完之后反而并不清楚这些技术怎样才能被用在实际的项目流程中.就像你的脑海中已经有了一块块"拼 ...
- 一个项目中:只能存在一个 WebMvcConfigurationSupport (静态文件失效之坑)
一个项目中:只能存在一个 WebMvcConfigurationSupport 在一个项目中WebMvcConfigurationSupport只能存在一个,多个的时候,只有一个会生效. 静态文件访问 ...
随机推荐
- 配置nginx为HTTPS服务器
默认情况下ssl模块并未被安装,如果要使用该模块则需要在编译时指定–with-http_ssl_module参数,安装模块依赖于OpenSSL库和一些引用文件,通常这些文件并不在同一个软件包中.通常这 ...
- java中的字符编码方式
1. 问题由来 面试的时候被问到了各种编码方式的区别,结果一脸懵逼,这个地方集中学习一下. 2. 几种字符编码的方式 1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符 ...
- jQuery 属性操作 - attr() 方法
定义和用法 attr() 方法设置或返回被选元素的属性值. 根据该方法不同的参数,其工作方式也有所差异. 实例1 设置被选元素的属性和值. <html><head><sc ...
- NOIP2011-普及组复赛模拟试题-第一题-NBA总冠军
题目背景 Background 一年两度的期末考要到来了!! 题目描述 Description 又要到考试了,Ljw决定放松一下,就打开电视,看见了篮球赛,他立即想到了每年的NBA总冠军队伍.由 ...
- 12C expdp issue
issue 1: 使用expdp时遭遇ora-31650 D:\oracle\diag\rdbms \trace>expdp \"/ as sysdba\" schemas ...
- 用非GUI模式执行测试,jp@gc - PerfMon Metrics Collector会出现无法获取正确数据的解决办法
用非GUI模式执行测试,jp@gc - PerfMon Metrics Collector会出现无法获取正确数据(实际显示的是Response Times Over Time),解决办法:在GUI模式 ...
- MFC中组合框CComboBox的使用
假如添加三行数据,其中当选择前两行时,提示自定义提示框信息,选择第三行时,提示当前字符串的内容,实现如下: void Cuse_demo_dllDlg::OnCbnSelchangeCombo1(){ ...
- Linux Shell 小脚本经典收藏
原文:http://www.cnblogs.com/Javame/p/3867686.html 1.在两个文件中找出相同的号码 diff -y xx.txt oo.txt | egrep -v &qu ...
- cPanel下载及安装信息 /usr/local/cpanel/bin/adduser-->realadduser
cPanel下载及安装信息 2011年03月31日 发布在 编程开发 留下评论 说到cPanel,懂的人都知道玩意得研究研究. ISO安装 http://layer2.cpanel.net/Cen ...
- 你所不知道的mybatis居然也有拦截器
对于mybatis的拦截器这个想法我来自于三个地方 也就是下面这个三个地方是可以使用的,其他的情况需要开发人员根据实际情况来使用. 1.对于分页的查询,我们可以对于分页的方法采用比较规范的命名,然后根 ...