论gulp 的使用

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"]);

猜你喜欢

转载自www.cnblogs.com/blance-blogs/p/8876296.html
今日推荐