gulp基本使用方法和常用模块

Posted 2021-04-08 小梦姑娘

自动化构建工具

优点  易于使用 插件高品 易于学习 构建快速（基于node.js流）

1.全局安装  淘宝cnpm  复制 回车  之后cnpm -v   npm install --blobal pulp

2. npm install --save -dev gulp产生依赖

3.在项目的根目录下创建gulpfile.js;

gulp.task('default',function(){

gulp.src('src/index.html')//寻找目标文件

.pipe(gulp.dest('dist'))//输出

})

gulp.task('任务名',function(){//配置任务

要执行的任务//第二个参数可以使数组，可以是回调函数

})

直接gulp 执行的是默认的任务defalut

gulp 任务名 执行任务

gulp.watch('要监听的路径'，如果发生变化，就执行此任务)

如果想要执行多个任务

gulp.task('default', ['要执行的文件1', '要执行的文件2']);

gulp.src('解析文件。目标可以是字符串格式匹配'，

{base:"基本路径"})；

**/**查找子文件下所有的文件

['asd/asd.js,'!sdc.js']//不查找指定文件

gulp-sass 编译scss

gulp-clean-css 压缩css  同gulp-csso

gulp-concat  合并文件

gulp.src(['./js/demo1.js','./js/demo2.js','./js/demo2.js'])    .pipe(concat('all.js'))         // 按照[]里的顺序合并文件    .pipe(gulp.dest('./dist'));

gulp-rename 重命名 .pipe(rename({suffix:'.min'}))添加后缀

rename({    dirname: "text",                // 路径名    basename: "goodbye",            // 主文件名    prefix: "pre-",                 // 前缀    suffix: "-min",                 // 后缀    extname: ".html"                // 扩展名  }

gulp-uglify  压缩js文件

gulp-htmlmin 压缩html文件 同 gulp-html-minify

gulp-browserify 用来进行模块化打包

gulp-clean   同del 删除整个文件夹

var del = require('del'); del('./dist');                      // 删除整个dist文件夹

gulp-webserver 起服务的

server({

port:9000,

host:可以配ip'

open:true,//自动打开端口

livereload:true//自动刷新，

fallback:''//可以指定html文件

middleware:function(req,res,next){//中间件

if(/\//)

next();

}

})

browser-async 起服务的插件，和gulp-webserver差不多

gulp-sequence 设置任务的执行顺序 （首先执行的，【异步执行的】,cb）//上面要执行的代码必须return

gulp-autoprefixer 自动添加前缀

autoprefixer({

browsers:['last 2 versions','android >= 4.0']

})

gulp-rev  随机生成md5版本号

rev.manifest()//生成文件名映射

gulp-rev-collector 替换路径

前面要写上src和路径

.pipe(revCollector({

replaceReved:true

}))

gulp-rev-replace

描述：重写被gulp-rev重命名的文件名。

var rev = require('gulp-rev'); var revReplace = require('gulp-rev-replace'); var useref = require('gulp-useref'); gulp.src('index.html')    .pipe(useref())                         // 替换HTML中引用的css和js    .pipe(rev())                            // 给css,js,html加上hash版本号    .pipe(revReplace())                     // 把引用的css和js替换成有版本号的名字

.pipe(gulp.dest('./dist'))

gulp-zip 压缩文件 .pipe(zip('all.zip'))

gulp-imagemin 压缩图片

gulp.src('./img/*.{jpg,png,gif}')

.pipe(imagesmin())

复制一个文件夹下所有的子文件  fonts2/**

异步的，同时开始执行

overflow-scrolling:touch ;只针对overflow:scroll管用

gulp-useref

对html页面中的js，css引用进行合并，压缩等操作

需要在html中对需要合并的标签进行注释

<!-- build:js scripts/combined.js -->    <script type="text/javascript" ></script>    <script type="text/javascript" ></script> <!-- endbuild -->

   <!-- build:css css/combined.css -->    <link href="css/one.css" rel="stylesheet">    <link href="css/two.css" rel="stylesheet"> <!-- endbuild -->

var gulp = require('gulp'),    useref = require('gulp-useref'); var del = require('del'); var vinylPaths = require('vinyl-paths'); gulp.task('default', function () {    return gulp.src('app/*.html')        .pipe(useref())

.pipe(vinylPaths(del))        .pipe(gulp.dest('dist')); });

合并之后同时删除之前的html,但是css仍然存在