更多插件安装使用示例以下:
在本地文件夹下载插件:npm install 插件名 --save-dev
var gulp = require("gulp");//导入glup var sass = require("gulp-sass");//拷贝并编译scss var server = require("gulp-connect");//创建服务器 var concat = require("gulp-concat");//合并js文件 var uglify = require("gulp-uglify");//压缩js文件 var minifyCss = require("gulp-minify-css");//压缩css var imagemin = require("gulp-imagemin");//压缩图片 var rename = require("gulp-rename");//文件重命名 var rev = require("gulp-rev");//给静态资源文件名添加一个哈希值后缀 var revCollector = require("gulp-rev-collector");//自动添加版本号 var autoprefixer = require("gulp-autoprefixer");//对css添加浏览器后缀 var htmlmin = require("gulp-htmlmin");//对html页面进行压缩
//基本语法 Gulp.task(“任务名称”,执行行数(){ Return gulp.src(“操做的文件路径”).pipe(插件名【与var定义名字相同】){ 相关参数 }))【可执行操做多个pipe()处理项】.pipe(gulp.dest(“返回结果的路径”)) });
gulp.task("addpre",function () { return gulp.src("src/css/aa.css").pipe(autoprefixer({ browsers:['last 2 versions','Android>=4.0'], cascade:true })).pipe(gulp.dest("dist/css")) }) //同时执行多项任务gulp.task(“合并的任务名”,[“任务1”,”任务2”,”任务3”,...]); gulp.task("default",["copyindex","copy-img","copy-data"]); <!--将src下的index页面进行压缩后拷贝到dist目录下--> gulp.task("copyindex",function () { return gulp.src("src/index.html").pipe(htmlmin({ minifyCss:true,//压缩css minifyJS:true,//压缩js removeComment:true,//压缩代码 collapseWhitespace:true//压缩空白区域 })).pipe(gulp.dest("dist/")) }) //批量拷贝 // src/images/**/*拷贝images下的全部文件下的全部资源 gulp.task("copy-img",function () { return gulp.src("src/images/**/*").pipe(imagemin()).pipe(gulp.dest("dist/images/")); }) //多组拷贝和合并"!src/json/s-*.json"//排除s开头的json文件 //!文件名 表示排除 gulp.task("copy-data",function () { return gulp.src(["src/json/*","src/xml/*","!src/json/s-*.json"]).pipe(gulp.dest("dist/data/")); }) //编译scss并拷贝到相关路径 gulp.task("scss-c",function () { return gulp.src("src/scss/**/*.scss").pipe(sass()).pipe(gulp.dest("dist/css/")); }) //watch监控数据,一旦文件,当即执行监视任务进行拷贝刷新 gulp.task("watch",function () { gulp.watch("src/index.html",["copyindex"]); gulp.watch("src/images/**/*",["copy-img"]); gulp.watch("src/json/*",["copy-data"]); }) //创建本地服务器 gulp.task("server",function () { server.server({ root:"dist" }); }) //js合并 与 .pipe(uglify())压缩 gulp.task("js",function () { return gulp.src("src/script**/*").pipe(concat("all.js")).pipe(uglify()).pipe(gulp.dest("dist/js/")).pipe(rename("all-min.js")).pipe(gulp.dest("dist/js/")) }) //对css进行压缩并建立json文件自动添加版本号 gulp.task("css",function () { return gulp.src("src/css/*.css").pipe(minifyCss()).pipe(rev()).pipe(gulp.dest("dist/css/")).pipe(rev.manifest()).pipe(gulp.dest("dist/css/")); }); //用来替换HTML页面上的link标签src路径(方便更改文件名) gulp.task("rev-collector",function () { return gulp.src(["dist/css/**/*.json","dist/index.html"]).pipe(revCollector({ replaceReved:true, })).pipe(gulp.dest("dist/")) });