前端小白的gulp入门

时间：2022-05-16 18:27:00

gulp新手入门

全局安装 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入门

插件

前端小白的gulp入门

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多个插件,差点吓我一跳,需要多查文挡,多百度哟

相关文章