gulp的基本方法和常用插件

gulp的基本方法

gulp的基本方法在使用之前都要先引入gulp
1.gulp.task()

//测试命令
//引入gulp
let gulp = require("gulp");
gulp.task("qqq",()=>{
	console.log("hello");
})

在命令提示符输入：gulp qqq 得到如下：

2.gulp.src()

//转存
let gulp = require("gulp");
gulp.task("aaa",()=>{
	gulp.src("src/aa.html").pipe(gulp.dest("server"));
})
//这段代码的意思就是将src文件夹下的aa.html文件通过管道pipe转存到文件夹server下，这个server不需要提前建好，代码执行后会自动生成

在命令提示符下输入：gulp aaa 运行得到：在自己的文件夹文件下会增加一个文件夹server，在该文件夹下有一个aa.html的文件。在运行该命令之前先在创建一个文件夹src,该文件夹下新建一个aa.html的文件。

3.转存所有文件

let gulp = require("gulp");
gulp.task("bbb",()=>{
	gulp.src("src/*").pipe(gulp.dest("sever"));
})
//src下所有文件都转存到server文件夹下

4.选择性转存文件

//src下所有的html,css文件都转存到server文件夹下
let gulp = require("gulp");
gulp.task("ccc",()=>{
	gulp.src("src/*",{"html,css"}).pipe(gulp.dest("server"));
})
//src下除了dd.txt文件全部都转存到server文件夹下
gulp.task("ddd",()=>{
	gulp.src("src/*","!src/dd.tex").pipe(gulp.dest("server"));
})

5.多层文件夹转存

let gulp = require("gulp");
gulp.task("eee",()=>{
	gulp.src(["src/**/*"]).pipe(gulp.dest("server"));
})
//src下子文件夹都转存到server文件夹下

6.监听

let gulp = require("gulp");
gulp.task("listen",()=>{
	gulp.watch("src/aa.html",["fff"]);
})
//代码运行后，首先会自动新建一个fff的文件夹，该文件夹下有一个aa.html的文件。然后在src下的aa.html文件编写内容在fff文件下的aa.html中会实时刷新，这就是gulp的监听

gulp常用插件

1.gulp-connect
创建服务器插件
在使用之前要先安装该插件，再引入插件
安装插件命令：npm install gulp-connect

let connect = require("gulp-connect");	//引入插件
gulp.task("server",()=>{
    connect.server({
        root:"server",     //以哪个文件夹为服务器的根目录
        port:89,       //端口号
        livereload:true  //是否可以自动刷新
    })
})
//端口号在标准范围内可自行修改

2.gulp-uglify
压缩文件插件
安装命令：npm install gulp-uglify

let uglify = require("gulp-uglify");
gulp.task('scripts',()=>{
     return gulp.src(['js/nav.js','js/banner.js’])
            .pipe(babel())
            .pipe(concat('index.js'))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js'))
})

3.gulp-concat
合并js文件
安装命令：npm install gulp-concat

gulp.task('scripts',()=>{
    return gulp.src(['js/nav.js','js/banner.js’])
          .pipe(babel())
          .pipe(concat('index.js'))
          .pipe(gulp.dest('dist/js'))
})

4.gulp-rename
重命名插件
安装命令：npm install gulp-rename

let rename = require("gulp-rename");
gulp.task('scripts',()=>{
     return gulp.src(['js/nav.js','js/banner.js’])
            .pipe(babel())
            .pipe(concat('index.js'))
            .pipe(gulp.dest('dist/js'))
            .pipe(uglify())
            .pipe(rename('index.min.js'))
            .pipe(gulp.dest('dist/js'))
})

5.gulp-babel
将es6转为es6
安装命令：npm install gulp-babel@7

//在当前gulp目录中，创建.babelrc的文件，里面的内容是{"presets":["es2015"]}
gulp.task('toes5',()=>{
     return gulp.src(['js/*.js'])
           .pipe(babel())
           .pipe(gulp.dest('dist/js'))
})