gulp的使用

gulp的使用：

前言：
1、gulp时一种自动化构建工具：生成流文件，减少频繁的IO（生成文件）操作，与webpack的区别：gulp可以看做任务运行器，webpack 可以看做模块打包器；
2、gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中

一、下载gulp：

$ cnpm install gulp-cli -g    //全局下载gulp；
$ cnpm install gulp -D        //局部下载gulp；
$ cnpm init	                  //初始化项目，创建package.js文件；

二、gulp的使用：

1、gulp的基本适合使用： ( gulpfile.js文件中输入代码)

function defaultTask(cb) {  //gulpfile.js文件中输入代码；
  // place code for your default task here(将你的默认代码任务放到这里)
  console.log('第一种写法，写入项目文件')
  cb();
}
exports.default = defaultTask

$ gulp   
 //运行项目命令，如需运行多个任务（task），可以执行 gulp <task> <othertask>
 //默认任务（task）将执行;
//var gulp = require('gulp');
//gulp.task('default', function(){
//    console.log("另一种写法")
//    }

运行结果：

2、配置文件gulpfile.js：
书写格式类似于js
学习要点：gulp的四个API：
gulp.task() 创建任务
gulp.src() 获取
gulp.dest() 写入
gulp.watch() 监听任务

const gulp = require('gulp');
//gulp中插件的应用： 下载插件 ==> 取到插件 ==> 应用插件
var htmlClean = require('gulp-htmlclean');    //压缩html
var imageMin = require('gulp-imagemin');      //压缩图片
var uglify = require('gulp-uglify');          //压缩js文件；
var debug = required('gulp-strip-debug');     //去掉js中的调试语句；
var less = required('gulp-less');             //将less装换为css文件；
var cleanCss = require('gulp-clean-css');     //压缩css文件；
var postCss = require('gulp-postcss');        //css增加前缀；
var autoprefixer = require('autoprefixer');
var connect = require('tulp-connect');       //开启本地服务器；
var folder = {          //保存变量，防止文件在生产环境时的名字冲突；
    src:"scr/",
    dist:'dist/'
}
var devMod = process.env.NODE_ENV == 'development'; 
//判断当前环境变量是否为开发模式；
// export NODE_ENV=development    也可在命令行设置环境变量为可开发环境；


gulp.task("html", function(){                   //创建任务；
        var page = gulp.src(folder.scr + "html/*") //取到到当前文件夹src下的所有html文件；
            .pipe(connect.reload())           //自动刷新越页面；
            if(!devMod){
                page.pipe(htmlClean())        //如果是生产环境，压缩html
            }
            page.pipe(gulp.dest(folder.dist + "html/")) //写入到dist文件夹下的html文件中；
    })

gulp.task("image", function(){                //创建任务；
        gulp.src(folder.scr + "image/*")       //取到到当前文件夹src下的所有iamge文件；
            .pipr(imageMin())                 //压缩图片；
            .pipe(gulp.dest(folder.dist + "image/"))  //写入到dist文件夹下的image文件中；
    })

gulp.task("css", function(){                  //创建任务
        var page = gulp.src(folder.scr + "css/*") //取到到当前文件夹src下的所有css文件；
            .pipe(connect.reload())           //自动刷新越页面；
            .pipe(less())                     //将less装换为css；
            .pipe(postCss([autoprefixer()]))  //增加css前缀；
            if(!devMod){
                page.pipe(cleanCss())      //如果是生产环境，压缩css；
            }
            page.pipe(gulp.dest(folder.dist + "css/"))  //写入到dist文件夹下的css文件中；
    })

gulp.task("js", function(){                     //创建任务；
        var page = gulp.src(folder.scr + "js/*")   //取到到当前文件夹src下的所有js文件；
            .pipe(connect.reload())            //自动刷新越页面；
            if(!devMod){
                page.pipe(debug())            //如果是生产环境，去掉调试语句；
                .pipe(uglify())               //如果是生产环境，压缩js；
            }
            page.pipe(gulp.dest(folder.dist + "js/"))   //写入到dist文件夹下的js文件中；
    })
gulp.task('server', function(){            //开启本地服务器；
    connect.server({
        port: '8888',                  //更改端口号，防止端口冲突；
        livereload:ture                //livereload变为true，调用可实现自动刷新功能；
        })
    })

gulp.task('watch', function(){         //监听文件变化 ==> 执行相应任务；
    gulp.watch(folder.src + 'html/*', ['html'])   //监听html；
    gulp.watch(folder.src + 'css/*', ['css'])     //监听css；
gulp.watch(folder.src + 'js/*', ['js'])           //监听js；
 
    })
gulp.task('default', ['html', 'css', 'js', 'image', 'server', 'watch'])
//监听所有的folder下src文件夹下的多有html文件，当它一改变就执行html任务.(css,js同理)