使用gulp 合并压缩打包，实时监控文件，实现本地server

Posted 2020-10-15 BD_evel

今天不讲webpack，就说说gulp是怎么进行压缩合并打包　

首先你的安装gulp ：

npm install gulp -g --save-dev

然后最基本的你因该知道gulp 的四个方法，

gulp.src：读取文件

gulp.pipe：将文件流输入到指定的文件目录

gulp.task：建立gulp任务，例如合并，压缩，清除文件，

gulp.watch：用于监听文件的变化

关于其他的嘛，那就是gulp 之所以那么强大，原因就是他有很多插件，我们要完成一些功能就必须要学会使用一些插件

 

1）在这里我给出package.json 文件中的devDependencies

    "gulp": "^3.9.1",　　　　　　　　　　//安装gulp
    "gulp-clean": "^0.3.2",　　　　　　//gulp的清除插件，主要用于每次打包发布，为了不出差错，我们希望要删除之前的一些文件
    "gulp-concat": "^2.6.1",　　　　　//合并文件　
    "gulp-connect": "^5.0.0",　　　　　//建立一个本地server,这样我们就可以使用localhost：port 访问我们的项目了　
    "gulp-livereload": "^3.8.1",　　　//实时监控　
    "gulp-minify-css": "^1.2.4",　　　//压缩css　
    "gulp-minify-html": "^1.0.6",　　//压缩html
    "gulp-open": "^2.0.0",　　　　　　//一般与gulp-connect使用，
    "gulp-rev": "^8.1.0",　　　　　　　　//主要用于缓存文件，给文件加上一个MD5后缀。
    "gulp-rev-collector": "^1.2.3",　　//主要用于缓存文件处理，替换文件[这里可以去了解gulp 缓存的问题，百度一下]
    "gulp-sequence": "^0.4.6",　　　　//多个任务的执行顺序控制
    "gulp-sync": "^0.1.4",
    "gulp-uglify": "^3.0.0",　　　　　　//压缩js
  

 

2）在你完成一系列安装之后，接下就是使用安装的插件完成一些东西。

首先你的在你的项目文件夹中有一个gulpfile.js文件【这个文件你可以把他看作你的gulp 启动文件】

在这个文件中你可以一一引进你安装的gulp插件

例如：

var gulp = require("gulp");

//压缩
var uglify = require("gulp-uglify");
var minifyCss = require("gulp-minify-css");
var minifyHtml = require("gulp-minify-html");

//清除不不要的文件
var gulpclean = require(‘gulp-clean‘);
// npm install gulp-open --save-dev

//本地打开一个地址
var open=require("open");

//npm install --svae-dev gulp-livereload（重新加载，刷新）
var livereload = require(‘gulp-livereload‘);

//npm install --svae-dev gulp-connect（本地服务器）
var connect= require(‘gulp-connect‘);

//npm install --save-dev gulp-rev-collector
//npm install --save-dev gulp-sync
var rev = require(‘gulp-rev‘);
var revCollector = require(‘gulp-rev-collector‘);

//合并文件（用于压缩之后）
//npm install  --save-dev gulp-concat
var concat = require(‘gulp-concat‘);


 //多个任务的顺序执行
//npm install --save-dev gulp-sequence
var gulpSequence = require(‘gulp-sequence‘);

当然你也可以用一个简单的方法，可以去get一下gulp-load-plugins的使用

 

3）好了现在就正式使用了

gulp.task(‘js‘,function(){
 return gulp.src(‘myPro/js/**/*.js‘)
        .pipe(concat(‘main.js‘))                            //- 合并后的文件名
        .pipe(uglify())                                     //使用uglify进行压缩,更多配置请参考：
        .pipe(rev())                                       //- 文件名加MD5后缀
        .pipe(gulp.dest(‘dist/js‘))
        .pipe(rev.manifest())                              //- 生成一个rev-manifest.json（这个文件是我们控制缓存文件的关键，主要用于文件替换）
        .pipe(gulp.dest(‘dist/rev/js‘))
        .pipe(livereload());
});

gulp.task(‘html‘,function(){
    return gulp.src(‘myPro/**/*.html‘)
        .pipe(minifyHtml()) //压缩
        //.pipe(rev())
        .pipe(gulp.dest(‘dist‘))
        .pipe(livereload());
});

gulp.task(‘css‘,function(){
 return gulp.src(‘myPro/css/**/*.css‘)
        .pipe(concat(‘main.css‘))
        .pipe(minifyCss())                                   //压缩css
        .pipe(rev())                                         //- 文件名加MD5后缀
        .pipe(gulp.dest(‘dist/css‘))
        .pipe(rev.manifest())                               //- 生成一个rev-manifest.json
        .pipe(gulp.dest(‘dist/rev/css‘))                   //- 将 rev-manifest.json 这个文件是我们控制缓存文件的关键，主要用于文件替换）
        .pipe(livereload());
});

gulp.task(‘watch‘, function() {
    /*
    livereload.listen({
        start:true,
        port:8080,
        reloadPage:"index.html"

    }); //要在这里调用listen()方法
*/

    //自动刷新
    livereload.listen();
    //构建本地服务器
    connect.server({
        root:[‘myPro‘],//从开发文件读取（默认是index.html）
        livereload:true,//重新刷新（针对高级浏览器）
        port:8091,//端口号
    });
    open("http://localhost:8091");//自动打开地址，网页
    //监听改变的文件,只要有以下的文件内容变化，就会刷新
    gulp.watch(‘myPro/css/**/*.css‘, [‘css‘]);
    gulp.watch(‘myPro/html/**/*.html‘, [‘html‘]);
    gulp.watch(‘myPro/js/**/*.js‘, [‘js‘]);
});

//清除dist文件夹
gulp.task("clean",function(){
    console.log("......do clearing......");
   return   gulp.src([‘dist‘],{read: false})    //{read: false}直接进行删除，不需要读取文件
       　　 .pipe(gulpclean({force: true}))     //{force: true}强制删除
        　　.pipe(livereload());
});

//使用gulp-rev替换文件，清除缓存的弊端问题
gulp.task("rev",function(){
    return gulp.src([‘dist/**/*.json‘,‘dist/**/*.html‘])
    .pipe(revCollector({
        replaceReved: true,
    }))
     .pipe(gulp.dest(‘dist‘))
     .pipe(livereload());
});

//建立一个总的任务
gulp.task("build",[‘js‘,‘css‘,‘html‘,‘watch‘]);
//gulp.task("default",[‘build‘]);

//直接运行gulp 默认启动server，会一次执行clean ,[js,css,html,html]（中括号里的同步执行）,rev ,watch
//可以去了解一下gulpSequence的用法
gulp.task("default",function(cd){
    gulpSequence(‘clean‘,[‘js‘,‘css‘,‘html‘],‘rev‘,‘watch‘)(cd)
});

值得注意的是：在每个任务的回调函数我们有必要进行返回通知，通知后面的任务当前这个任务执行完啦，可以接着执行下面的任务啦。。。。。。

在这里只是说如何使用（也只是使用了一部分），至于原理没做深入了解。。。

https://github.com/EvalGitHub/angular1_require_gulp