一个完整的项目中，需要的基本gulp

Posted 2020-07-28 起个好名字

　　一个完整的项目需要使用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())

})