美文网首页
Gulp 打造前端工作流 有很多高质量的插件 打包 压缩

Gulp 打造前端工作流 有很多高质量的插件 打包 压缩

作者: 楼水流云 | 来源:发表于2019-10-07 20:57 被阅读0次

    1、安装
    npm install gulp-cli -g 全局
    npm install gulp -D 当前项目的dev里 可以require到
    thouch gulpfile.js 在当前文件夹下创建一个gulpfile.js文件
    gulp --help 使用简介

    2、初始化
    (1)、npm init //初始化package.json文件
    (2)、在npm install --save-dev gulp //安装gulp
    (3)、npm install gulp-cli -g //安装gulp命令行
    (4)、新建gulpfile.js文件 //这个是gulp的packge文件
    (5)、var gulp = require("gulp") -g全局require不到 所以要 npm install gulp --save-dev gulp

    3、gulp对象方法
    gulp.task //创建一个任务 流水线
    gulp.src //处理哪些东西 .js所有的js文件 !client/b.js 不要这个文件 client/bad.js文件src
    gulp.dest //处理完导出
    gulp.watch //检测到文件的改动 gulp.watch('js/*/.js'['cssnano','concat'],function(){})

    4、常见gulp插件
    gulp-htmlmin html压缩
    gulp-cssnano css压缩
    gulp-uglify js压缩
    gulp-imagemin 图片压缩

    gulp-concat 合并文件
    gulp-rename 重命名
    gulp-clean 清空文件夹
    gulp-jshint js代码规范性检查
    gulp-rev 添加版本号
    gulp-rev-replace 版本号替换
    gulp-useref 解析html资源定位
    gulp-less 把less转换成css
    gulp-autoprefixer 后编译

    browser-sync 实时联调

    5、基本用法:
    var gulp = require("gulp") 或
    imropt Gulp form ('gulp') //?没验证过

    gulp.task('html',function(){
    gulp.src("a/b/*.js") 获得a文件夹下的b文件夹里的所有.js文件
    .pipe(jade()) 用require来的工具jade()做一件事
    .pipe(minify()) 用require来的工具minify()做一件事
    .pipe(gulp.dest("c/d")) 导出到c文件下的d文件夹里
    })

    gulp.task('default',['thml','css'],funciton(){}) []这里面是并行的 并不是串行

    执行
    gulp 执行默认default命令
    gulp html 执行html命令

    相关文章

      网友评论

          本文标题:Gulp 打造前端工作流 有很多高质量的插件 打包 压缩

          本文链接:https://www.haomeiwen.com/subject/iiqcpctx.html