gulpjs主要进行CSS文件与JS文件压缩和合并，为什么要压缩和合并呢，假如说HTML引了10多个JS,一个个写相对麻烦，加载时间也长，直接gulpjs压缩到一个文件，快速提高运行速度，提高用户体验度。

二、gulpjs安装

gulpjs的安装需要依赖Node.js，

1：先下载nodejs网址：nodejs.cn

2：打开node.js，在窗口写出npm install -gulp （安装全局gulpjs）下载较慢。

3：npm install --save-dev gulp （安装作为项目开发所需要的依赖项）

4：安装所需要的插件，首先安装用来压缩JS与CSS的插件，在打开nodejs的窗口输入：npm install

--save-dev gulp-uglify（安装用来压缩JS文件的插件）

5：npm install --save-dev gulp-minify-css（安装用来压缩css文件的插件）:

6：npm install --save-dev gulp-concat（安装用来合并的插件）

7：npm install --save-dev gulp-jshint（安装用来检查js代码的插件）

8：npm install --save-dev gulp-rename（安装用来重命名的插件）

9：npm install --save-dev gulp-uglify gulp-minify-css gulp-concat gulp-jshint gulp-rename（也可以一起安装插件 注意空格）

10：在我们的项目文件夹下要建立一个以gulpfle.js命名的文件。一定要以gulpfle.js来命名。

11：详细可参考：

三、gulpjs的css文件的合并和压缩

//定义依赖项

var gulp = require（′gulp′),

//定义合并插件

concat = require（′gulp-concat′),

//定义压缩css的插件

mincss = require（′gulp-minify-css′),

//定义重命名插件

rename = require（′gulp-rename′);

//定义一个名字为css任务

gulp.task(′css′,funtion(){

//操作css文件夹中所有的css文件

gulp.src([′css/*.css′])

//执行合并插件并结合并完成文件起一个名字

.pipe(concat(′max.css′))

//执行压缩插件

.pipe(mincss())

//执行重命名插件

.pipe(rename({suffix:＇.hd＇}))

//把执行以上操作过后的文件放在css1文件夹内

.pipe(gulp.dest(＇css1＇));

})

//执行任务名为css的任务

gulp.task(＇default＇,[＇css＇])

四、gulpjs的自动执行

详细视频搜后盾人可观看。

更多精彩内容请关注 ---- 微信公众号：houdunit

看完不要跑记得出来吐吐槽！╰(￣▽￣)╮