一个完整的项目中,需要的基本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())

})

时间: 2024-08-10 11:31:33

一个完整的项目中,需要的基本gulp的相关文章

“全栈”工程师笔记/记一个完整的项目流程

引语:相信很多人都自认为自己是个全栈工程师,不管有没有验证过,我也不例外.心中总有一种傲气,事情都能做,只是做得好不好,时间够不够的问题!所以,对很多事情,我其实是一点不怕的,随着时间的推移,人总是应该要进步的,去做一些没做过的事,才对得起成长二字! 刚好上上个月,公司有一个新的项目需求,需要做一个全新的系统,但是看起来也不难,所以任务就交给了我,我可以说我是这个项目负责人吗?应该是可以的!但是,最开始就已经存在了一些坑,等着我去跳,就连最开始过需求的时候,我也不在场!不过,最终,项目也终于交到

一个完整JavaWeb项目历程02 — Hello Servlet

前言 前一篇引入了很多概念性的东西,各种百度谷歌拼起来的一个Hello JavaWeb工程:那又有什么关系呢,只要在学习每天都会接触新概念的东西:尽管做就是了,概念不清楚又有什么关系.目的只有一个:做 一个完整的JavaWeb项目. 一.创建JavaWebServlet项目 请参考前一篇 二.创建一个HelloServlet类 其实包可以不用单独去创建,在创建Servlet的时候,Java package一栏填写包名:com.fwbc.servlet就可以自动创建包. 三.创建一个hello.j

Android一个完整的项目转成SDK提供给第三方嵌入

1.项目导出Apk反编译到res/values/目录下找到'public.xml'和'ids.xml'两个文件: 2.项目设置为libray项目: 3.项目"Clean...",如果出现switch语句错误,一般要修改成if-else: [选择switch整个语句-右键-Quick Fix-Convert 'switch' to 'if-else'] 4.拷贝上面提到的'public.xml'和'ids.xml'两个文件到项目res/values目录下,这一步是定义资源ID,防止在Li

简要说说一个完整机器学习项目的流程

1 抽象成数学问题 明确问题是进行机器学习的第一步.机器学习的训练过程通常都是一件非常耗时的事情,胡乱尝试时间成本是非常高的.这里的抽象成数学问题,指的我们明确我们可以获得什么样的数据,目标是一个分类还是回归或者是聚类的问题,如果都不是的话,如果划归为其中的某类问题. 2 获取数据 数据决定了机器学习结果的上限,而算法只是尽可能逼近这个上限.数据要有代表性,否则必然会过拟合.而且对于分类问题,数据偏斜不能过于严重,不同类别的数据数量不要有数个数量级的差距.而且还要对数据的量级有一个评估,多少个样

【Android】 分享一个完整的项目,适合新手!

写这个app之前是因为看了头条的一篇文章:http://www.managershare.com/post/155110,然后心想要不做一个这样的app,让手机计算就行了.也就没多想就去开始整了. 项目用到了三个开源包: 一个是图片加载:https://github.com/nostra13/Android-Universal-Image-Loader 使用方法: 1.在Appliction的onCreate里初始化 /** * 初始化imageLoader */ public void ini

一个完整JavaWeb项目历程01 — Hello World

一.环境搭建 后续有时间补上 二.配置运行环境Tomcat 三.创建JavaWeb项目 原文地址:https://www.cnblogs.com/fwbc/p/9125120.html

一个完整项目的流程都涉及哪些内容

最近在跟着老师学做一个有关图书馆的项目,目标是做出一个移动端的包含校内图书馆内容的图书馆.上完第一节课,梳理一下有关内容. 第一节课主要介绍了做一个完整的项目的流程都有哪些,涉及哪方面的内容,具体如下: 一.首先需要确定你的目标是什么,即你要做什么.确定你要做的项目是什么,比如我学做的是有关图书馆的项目. 二.项目流程.了解主流IT互联网公司的项目流程及职责,来划分自己需要做内容都有哪些. 三.产品设计.进行需求分析,版本规划,原型设计. (1)需求分析 (2)版本规划 (3)原型设计 这里要推

react + redux 完整的项目,同时写一下个人感悟

先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angular是一个大而全的框架,用了angular几乎就不需要用其他工具辅助配合,但是react不一样,他只负责ui渲染,想要做好一个项目,往往需要其他库和工具的配合,比如用redux来管理数据,react-router管理路由,react已经全面拥抱es6,所以es6也得掌握,webpack就算是不会配置也

KJMusic完整音乐项目

KJMusic完整音乐项目 KJMusic是一个完整音乐项目,这个项目从欢迎页面到首页以及音乐播放页面都做得非常不错.并且本音乐支持本地音乐,和音乐电台,支持切换上下首个.本项目还支持侧滑出现menu,和音乐下载.并且支持歌词同步LyricFragment中实现通过LrcView歌词lyric部分,其中 LrcView extends View implements ILrcView 详细可以下载学习,项目来源:https://github.com/KJFrame/KJMusic 运行效果: 相