论gulp 的使用

Posted 2020-10-31 blance-blogs

1、gulp的安装

首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

 

npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

 

npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：

 

npm install --save-dev gulp

这样就完成了gulp的安装。至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：why-do-we-need-to-install-gulp-globally-and-locally、what-is-the-point-of-double-install-in-gulp。大体就是为了版本的灵活性，但如果没理解那也不必太去纠结这个问题，只需要知道通常我们是要这样做就行了。

 

 

2、开始使用gulp

2.1 建立gulpfile.js文件

就像gruntjs需要一个Gruntfile.js文件一样，gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。新建一个文件名为gulpfile.js的文件，然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。下面是一个最简单的gulpfile.js文件内容示例，它定义了一个默认的任务。

 

 

gulpfile.js

var gulp = require("gulp"),//引入所需要的包

rev = require("gulp-rev-append"),//使用gulp-rev-append给页面的引用添加版本号，清除页面引用 缓存(给URL自动加上版本号)。

css = require("gulp-uglifycss"),

uglify = require("gulp-uglify");//js文件的压缩

 

gulp.task("revGulp",function () {//执行任务“revGulp”

gulp.src("./distTpl/*html")//匹配所有distTpl下的html文件

.pipe(rev())

.pipe(gulp.dest("./tpl"))

});

gulp.task("css",function () {

gulp.src("./distCss/*.css")

.pipe(css())

.pipe(gulp.dest("./css"))

});

gulp.task("uglify",function () {

gulp.src("./distJs/*.js")//要压缩的js文件

.pipe(uglify())//使用uglify进行压缩,更多配置请参考：

.pipe(gulp.dest("./js"))//压缩后的路径

});

gulp.task("watch",function () {//监听文件变化，当文件发生改变时，利用它执行相应的任务。

gulp.watch("./distCss/*.css",["css","revGulp"]);

gulp.watch("./distJs/*.js",["uglify","revGulp"]);

});

gulp.task("default",["watch"]);