全局安装 cnpm install -g gulp
本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init
安装插件cnpm install gulp-插件名 -D
插件官方文档
细心的科普
//i -->install //D -->--save-dev 记录package.json文件里 //S -->--save 本地安装gulp报低级错误
删除node_modules在安装
rm -rf node_modules
cnpm i
先新建一个任务清单
新建gulpfile.js文件
插件
gulp-less 编译LESS文件
gulp-autoprefixer 添加CSS私有前缀
gulp-cssmin 压缩CSS
gulp-rname重命名
gulp-imagemin 图片压缩
gulp-uglify压缩Javascript
gulp-concat合并
gulp-htmlmin压缩HTML
gulp-rev添加版本号 //md5文件加密
gulp-rev-collector内容替换
不上代码怎么行呢?不然还是会摸不到北
//引用本地安装的gulp var gulp = require("gulp"); var less = require("gulp-less"); //less转化 var cssmin = require("gulp-cssmin"); //压缩css var imagemin = require("gulp-imagemin"); //压缩图片 var uglify = require("gulp-uglify"); //资源合并 var concat = require("gulp-concat"); //合并 var htmlmin = require("gulp-htmlmin"); //压缩html var minify = require('html-minifier').minify; //注释清除插件 var postcss=require("gulp-postcss"); //加私有前缀 var autoprefixer=require("gulp-autoprefixer"); var rev = require("gulp-rev"); //添加版本号 var revCollector=require("gulp-rev-collector"); //文本替换 //定义任务 gulp.task("less", function () { //借助gulp.src来指定less文件位置 gulp.src("./less/*.less") //借助gulp .pipe(less()) .pipe(cssmin()) .pipe(autoprefixer()) .pipe(rev()) //生成的文件名添加md5 垃圾回收 //通过gulp.dest进行存储 .pipe(gulp.dest("./release/piblic")) .pipe(rev.manifest()) //记录css改名记录 是这个插件gulp-rev-collector .pipe(gulp.dest("./release/rev")) }) //压缩图片 命令 gulp image gulp.task("image", function () { gulp.src("./images/*") .pipe(imagemin()) .pipe(gulp.dest("./imagemin")) }) //压缩js 命令gulp js gulp.task("js", function () { gulp.src("./scripts/*.js") .pipe(concat("all.js"))//合并的文件记得写名字 .pipe(uglify()) .pipe(gulp.dest("./bbb")) }) //压缩html 命令 gulp html //注意单词别写错了哟 //这个还是看官方文档吧,很清晰 gulp.task("html", function () { gulp.src(['./index.html', './views/*.html'],{base:'./'}) //可以写多个文件 {base:"./"}就是./是不动的,相当于忽略掉 .pipe(htmlmin({collapseWhitespace: true, removeComments: true,minifyJS:true})) //这个看文档哦 minifyJS:true压缩html中的js .pipe(gulp.dest("./aaa")) }) // 替换 这个要注意文件的路径哟 其实就是替换html中的css路径,因为 // 当你把css的文件名改的就需要改html的文件路径,是不是有点罗嗦 // 记得要使用哪个插件一定提前下载,不然报错你也会一脸懵逼 gulp.task("rev",function () { gulp.src(["./release/rev/*.json","./release/*.html"],{base:"./release"}) .pipe(revCollector()) .pipe(gulp.dest("./release")) }) //html中的js改名替换我还没弄出来看到官网有3000多个插件,差点吓我一跳,需要多查文挡,多百度哟