许昌市建设局网站,太原最新消息,外贸网站建设系统,wordpress评论添加验证一、开始 使用gulp#xff0c;需知道4个API#xff1a; gulp.task():用来定义任务, 格式#xff1a;gulp.task(name[, deps], fn) name 为任务名 deps 是当前定义的任务需要依赖的其他任务#xff0c;为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如…一、开始 使用gulp需知道4个API gulp.task():用来定义任务, 格式gulp.task(name[, deps], fn) name 为任务名 deps 是当前定义的任务需要依赖的其他任务为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖则可省略这个参数 fn 为任务函数我们把任务要执行的代码都写在里面。该参数也是可选的。 gulp.src()用来读取文件, 格式gulp.src(globs[, options]) globs 参数是文件匹配模式(类似正则表达式)用来匹配文件路径(包括文件名)当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时该参数可以为一个数组。 options 为可选参数。通常情况下我们不需要用到。 gulp.dest()用来写文件的, 格式gulp.dest(path[,options]) path 为写入文件的路径 options 为一个可选的参数对象通常我们不需要用到 gulp.watch()用来监视文件的变化当文件发生变化后我们可以利用它来执行相应的任务例如文件压缩等, 格式gulp.watch(glob[, opts], tasks) glob 为要监视的文件匹配模式规则和用法与gulp.src()方法中的glob相同。 opts 为一个可选的配置对象通常不需要用到 tasks 为文件变化后要执行的任务为一个数组 二、实例 需要先安装gulp npm install -g gulp 手动建立一个gulpfile.js文件作为入口 初始化引入gulp npm init;
npm install --save-dev gulp;然后在gulpfile.js写入 var gulp require(gulp);var plugins require(gulp-load-plugins)();var src {js: js/*.js,html: ./*.html,css: css/*css,img: img/**
}var buildGulp {// html 打包buildHtml: () {gulp.src(src.html).pipe(plugins.minifyHtml()).pipe(gulp.dest(./dist));},// css 打包buildCss: () {gulp.src(src.css).pipe(plugins.minifyCss()).pipe(gulp.dest(dist/css));},// js 打包buildJs: () {gulp.src(src.img).pipe(plugins.imagemin()).pipe(gulp.dest(dist/img));},// img打包buildImg: () {gulp.src(src.js).pipe(plugins.uglify()).pipe(gulp.dest(dist/js));},
};gulp.task(default,function(){gulp.start(build)
});gulp.task(build, function(){for ( var i in buildGulp){buildGulp[i]();}
}); 我们用gulp-uglify压缩js, gulp-minify-css压缩css, gulp-minify-html压缩htmlgulp-imagemin压缩图片 为避免在文件头部引入依赖时过去冗长引入gulp-load-plugins来从package.json中引入依赖通过调用实例中的方法来加载依赖加载方式为按需加载 最后执行gulp会从名称为default的task开始执行打包文件输出的文件由gulp.dest设置在dist目录下转载于:https://www.cnblogs.com/lastnigtic/p/6974961.html
