这是一种简单的工具,非常容易上手而且功能也是多种多样。

  例如将整个网站打包下来的时候,看到的js代码总是混乱的,这就是类似于gulp的工具进行了加密,其他的功能还有很多这里就不赘述了。

  

  首先是gulp的安装。

    gulp的安装首先需要一个服务器,这里安装了node.js和Git Bash。将两样东西安装好了之后,进入gulp的目录下面,然后右键

点击Git Bash Here。

然后输入node node_modules/gulp/bin/gulp.js -sw进入目录

之后便可以输入指令了,如

node node_modules/gulp/bin/gulp.js pair.

 

 

关于gulp的功能,其中有分别有——

(1)less文件

  less文件是一个语法上非常近似css的文件,使用方便,因为在这个less文件上进行的改动都会直接传输到总的css文件上进行整合。这样你就可以根据需要创建多个less文件,而不需要将所有的css代码都挤在一起。

  语法上非常近似的less还可以这么使用:

.a{width:300px;

height:300px;

background:red;

p{

color:red;

}

}

没错,这玩意儿可以这样嵌套,代表属于这个a类的p元素的字体颜色会变成红色。

即便是将结构改的乱七八糟也没关系,最后整合的时候还是会变回来的——

.a{width:300px;

height:300px;

background:red;

 

}

.a p{

color:red;

}

(2)文件的【流】动

除了这些小东西之外,gulp还有流功能,将某个文件放置,整合同步编译等等都可以做到,例如——

使用以下代码,对gulp的原本文件进行修改,可以做到——

gulp.task("conn",function(){
gulp.src("src/css/*.less").pipe(concat('aa.css')).pipe(gulp.dest(__dirname+'/dist/css'))

})

将根目录下的arc文件夹下的,css文件里所有.less文件,【全部整合成一个aa.css文件】,将其拷贝到一个路径上。这个路径是【根文件路径+/dist/css】

 

因为本人学的也不是很多,所以在这里就列举机种语法——

gulp.task("yahaha", function(){
console.log('aa')
})

这代表创建一个任务yahaha,当执行这个服务的时候,执行后面的函数,结果会在控制台上显示aa。

而执行的方式是在Git Bash中执行node node_modules/gulp/bin/gulp.js

后面加上任务名字,完整地就是:node node_modules/gulp/bin/gulp.js yhaha

控制台显示也会在这里显示出aa。

下图是执行了pair任务的结果:

 

有时候,你也能看到这个句式——

gulp.task("task_three", ['task_one', 'task_two'], function(){

.....

})

这代表着执行这个任务之前,会先执行task_one和task_two两个任务。

 

接下来是这个——

gulp.task("auto_updatejs", function(){
gulp.watch("src/example/js/*.js", ['gulpConcat'])
})

方法中,gulp.watch代表监听事件,它会监听一个或多个文件,上文的代码监听的就是根目录下src/example/js路径中的【所有结尾是.js的文件,一旦文件发生了更改(这里的评判标准是文件是否保存了),变会触发事件,从而执行后面的任务。

 

gulp.task("gulpConcat", function(){
gulp.src('src/css/a.less').pipe(gulp.dest("C:/Demo/testGyf/dist"))
 gulp.src('src/css/*.js').pipe(gulp.dest(otherDist));

});

第一句代表着将路径下的a.less中的数据读出来,然后保存在后面的路径当中

第二句代表将路径下所有.js文件保存在后面的路径中,这个路径自然可以是变量。

 

 gulp.src('src/css/*.js').pipe(concat('aa.js')).pipe(gulp.dest(xiu))

这个代表将数据读取出来之后,通过【管道】将其整合成aa.js然后存放在后面的路径下面。