初识gulp

官网：https://www.gulpjs.com.cn/

新建文件gulptest

文件目录如下：

 

 dist：编译后输出文件

src：源代码

gulpfile.js:gulp的配置文件

index.html：入口

package.json:包配置文件

刚开始可以在package.json中写下，项目名和版本：

{
    "name": "gulp_test",
    "version": "1.0.0"
}

 

 安装全局gulp

npm install gulp -g

局部安装gulp

npm install gulp --save-dev

然后package.json中就多了一行：

 使用：

一、用gulp压缩合并js文件

 首先，在src/js文件夹下创建两个js文件：test1.js、test2.js。随便写几句代码

test1.js:

// gulp不支持es6  如要用es6 需要用babel转
(function(){
    var result = [1,2,3,4,5].map(function(item){
        return item + 10;
    });
    console.log(result);
})();

 

test2.js:

(function(){
    function foo(num1,num2){
        return num1 + num2;
    }
    console.log(foo(1,2));
})()

 

先下载三个合并压缩js所用到的插件：

npm install gulp-concat gulp-uglify gulp-rename --save-dev

然后配置gulpfile.js:

var gulp = require("gulp");//引入gulp
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 注册任务
// gulp.series：按照顺序执行
// gulp.paralle：可以并行计算
// gulp.task("任务名",function(){
//     // 配置任务的操作
// })
// 注册合并js的任务
gulp.task("js",function(){
    // 配置任务的操作
    // return gulp.src("src/js/**/*.js");//深度遍历  能找到js文件第一层的js文件及更深层文件的js
    return gulp.src("src/js/*.js")//潜度遍历 只能遍历js第一层的js文件  找到目标源文件，将数据读取到gulp的内存中
            .pipe(concat('buld.js')) //临时合并文件 buld.js是合并之后的文件名
            .pipe(gulp.dest('dist/js/')) //临时输出到dist文件夹下的js文件中，没有js文件会自动创建
            .pipe(uglify())  //压缩文件
            // .pipe(rename('build.min.js')) //重命名
            .pipe(rename({suffix:'.min'})) //重命名 配置后缀名
            .pipe(gulp.dest('dist/js/'))//压缩文件输出路径
    

})
// 注册完任务，可以在命令行通过 gulp 任务名  来执行任务
// gulp的任务多的话，每次每个任务都通过  gulp 任务名来执行，会比较费时，可以通过默认任务来执行


// 注册默认任务
// gulp.task("default",['任务名1','任务名2'])//gulp3写法
// gulp.task("default",gulp.series('任务名1','任务名2',function(){})) //gulp4写法
gulp.task("default",gulp.series(function(){

}))

/**
 * 经常使用的gulp插件
 * 相关插件：
 *  gulp-concat:合并文件（js/css）
 *  gulp-uglify:压缩js文件
 *  gulp-rename:文件重命名
 *  gulp-less：编译less
 *  gulp-clear-css：压缩css
 *  gulp-livereload:实时自动编译刷新
 */

/**
 * 重要api
 * gulp.src(filepath/pathArr):指向指定路径的所有文件，返回文件流对象；用于读取文件
 * gulp.dest(dirPath/pathArr):指向指定的所有文件夹；用于向文件夹中输出文件
 * gulp.task(name,[deps],fn):定义一个任务
 * gulp.watch():监视文件的变化
 * 
 */

/**
 * 下载插件(合并压缩js需要的插件)
 * npm install gulp-concat gulp-uglify gulp-rename --save-dev
 * 引入
 *  var concat = require('gulp-concat')
 *  var uglify = require('gulp-uglify')
 *  var rename = require('gulp-rename')
 */

然后再命令行输入 gulp js 命令；发现dist文件下多了两个文件：buld.js  buld.min.js  一个未压缩的文件，一个压缩的文件

 二、在上面的基础上继续  编译less、合并css、压缩css、压缩html：

var gulp = require("gulp");//引入gulp
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less')
var cssClean = require('gulp-clean-css')
var htmlMin = require('gulp-htmlmin')

// 注册任务
// gulp.task("任务名",function(){
//     // 配置任务的操作
// })
// 注册合并js的任务
gulp.task("js",function(){
    // 配置任务的操作
    // return gulp.src("src/js/**/*.js");//深度遍历  能找到js文件第一层的js文件及更深层文件的js
    return gulp.src("src/js/*.js")//潜度遍历 只能遍历js第一层的js文件  找到目标源文件，将数据读取到gulp的内存中
            .pipe(concat('buld.js')) //临时合并文件 buld.js是合并之后的文件名
            .pipe(gulp.dest('dist/js/')) //临时输出到dist文件夹下的js文件中，没有js文件会自动创建
            .pipe(uglify())  //压缩文件
            // .pipe(rename('build.min.js')) //重命名
            .pipe(rename({suffix:'.min'})) //重命名 配置后缀名
            .pipe(gulp.dest('dist/js/'))//压缩文件输出路径
    

})
// 注册转换less的任务
gulp.task('less',function(){
    return gulp.src('src/less/*.less')
            .pipe(less()) //编译less文件为css文件
            .pipe(gulp.dest('src/css/')) //编译过的less文件输出到css文件夹下，后续和其它的css文件合并
})
// 注册合并压缩css任务
// gulp.task('css',['less'],fn);//中间有参数代表  先执行完less任务，再执行less任务，表示同步执行
gulp.task('css',function(){
    return gulp.src('src/css/*.css')
            .pipe(concat('build.css')) //合并css 并命名
            .pipe(gulp.dest('dist/css/')) //输出合并后的css文件 可以不输出，直接输出压缩文件
            .pipe(cssClean({compatibility:'ie8'})) //压缩css  可以没有任何配置 直接执行cssClean(),加这个配置的意思是兼容到ie8
            .pipe(rename({suffix:'.min'})) //重命名文件 加.min后缀
            .pipe(gulp.dest('dist/css/')) //输出到build/css/文件件下
})
// 注册压缩html任务
gulp.task("html",function(){
    return gulp.src("index.html")
            .pipe(htmlMin({collapseWhitespace:true})) //压缩html  collapseWhitespace代表去除空格 不加参数，和源文件压缩的和没压缩的没效果
            .pipe(gulp.dest("dist/"))
})
// 注册完任务，可以在命令行通过 gulp 任务名  来执行任务
// gulp的任务多的话，每次每个任务都通过  gulp 任务名来执行，会比较费时，可以通过默认任务来执行


// 注册默认任务
// gulp.series：按照顺序执行
// gulp.parallel：可以并行计算
// gulp.task("default",['任务名1','任务名2'])//gulp3写法
// gulp.task("default",gulp.series('任务名1','任务名2')) //gulp4写法
gulp.task("default",gulp.series('js','less','css','html'))//同步按顺序执行
// gulp.task("default",gulp.parallel('js','less','css'))//异步执行 这里会出问题 如果合并css在less编译之前执行，less的css就不会被编译到合并文件中

/**
 * 经常使用的gulp插件
 * 相关插件：
 *  gulp-concat:合并文件（js/css）
 *  gulp-uglify:压缩js文件
 *  gulp-rename:文件重命名
 *  gulp-less：编译less
 *  gulp-clear-css：压缩css
 *  gulp-livereload:实时自动编译刷新
 */

/**
 * 重要api
 * gulp.src(filepath/pathArr):指向指定路径的所有文件，返回文件流对象；用于读取文件
 * gulp.dest(dirPath/pathArr):指向指定的所有文件夹；用于向文件夹中输出文件
 * gulp.task(name,[deps],fn):定义一个任务
 * gulp.watch():监视文件的变化
 * 
 */

/**
 * 下载插件(合并压缩js需要的插件)
 * npm install gulp-concat gulp-uglify gulp-rename --save-dev
 * 引入
 *  var concat = require('gulp-concat')
 *  var uglify = require('gulp-uglify')
 *  var rename = require('gulp-rename')
 */
/**
 * 对css进行合并压缩
 * 创建less/css文件
 *  src/css/test1.css
 *  src/css/test2.css
 *  src/less/test3.less
 * 下载合并压缩css、less所需插件
 *  npm install gulp-less gulp-clean-css --save-dev
 */

/**
 * 压缩html
 *  所需插件
 *  npm install gulp-htmlmin --save-dev
 *  
 */

 三、自动化编译（修改某一个文件后，马上编译）

var gulp = require("gulp");//引入gulp
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less')
var cssClean = require('gulp-clean-css')
var htmlMin = require('gulp-htmlmin')
var watch = require('gulp-watch')

// 注册任务
// gulp.task("任务名",function(){
//     // 配置任务的操作
// })
// 注册合并js的任务
gulp.task("js",function(){
    // 配置任务的操作
    // return gulp.src("src/js/**/*.js");//深度遍历  能找到js文件第一层的js文件及更深层文件的js
    return gulp.src("src/js/*.js")//潜度遍历 只能遍历js第一层的js文件  找到目标源文件，将数据读取到gulp的内存中
            .pipe(concat('buld.js')) //临时合并文件 buld.js是合并之后的文件名
            .pipe(gulp.dest('dist/js/')) //临时输出到dist文件夹下的js文件中，没有js文件会自动创建
            .pipe(uglify())  //压缩文件
            // .pipe(rename('build.min.js')) //重命名
            .pipe(rename({suffix:'.min'})) //重命名 配置后缀名
            .pipe(gulp.dest('dist/js/'))//压缩文件输出路径
    

})
// 注册转换less的任务
gulp.task('less',function(){
    return gulp.src('src/less/*.less')
            .pipe(less()) //编译less文件为css文件
            .pipe(gulp.dest('src/css/')) //编译过的less文件输出到css文件夹下，后续和其它的css文件合并
})
// 注册合并压缩css任务
// gulp.task('css',['less'],fn);//中间有参数代表  先执行完less任务，再执行less任务，表示同步执行 gulp3写法
gulp.task('css',gulp.series('less',function(){//启动css任务之前先启动less gulp4写法
    return gulp.src('src/css/*.css')
            .pipe(concat('build.css')) //合并css 并命名
            .pipe(gulp.dest('dist/css/')) //输出合并后的css文件 可以不输出，直接输出压缩文件
            .pipe(cssClean({compatibility:'ie8'})) //压缩css  可以没有任何配置 直接执行cssClean(),加这个配置的意思是兼容到ie8
            .pipe(rename({suffix:'.min'})) //重命名文件 加.min后缀
            .pipe(gulp.dest('dist/css/')) //输出到build/css/文件件下
}))
// 注册压缩html任务
gulp.task("html",function(){
    return gulp.src("index.html")
            .pipe(htmlMin({collapseWhitespace:true})) //压缩html  collapseWhitespace代表去除空格 不加参数，和源文件压缩的和没压缩的没效果
            .pipe(gulp.dest("dist/"))
})

// 注册完任务，可以在命令行通过 gulp 任务名  来执行任务
// gulp的任务多的话，每次每个任务都通过  gulp 任务名来执行，会比较费时，可以通过默认任务来执行

// 注册监视任务
gulp.task('watch',function(){//中间的参数表示 default任务执行完后再执行监视任务
    // 监视任务比较特殊
    // 这里不需要return
    // 确认监听的目标以及绑定相应的任务
    watch('src/js/*.js',gulp.series('js'));//当src/js/下的js文件发生变化时，启动相应的任务
    watch(['src/css/*.css','src/less/*.less'],gulp.series('css'));//当src下的less|css文件下的样式文件发生变化时，编译css文件，因为css启动之前先启动less，所以这里写一个css任务就够了
    
})
// 注册默认任务
// gulp.series：按照顺序执行
// gulp.parallel ：可以并行计算
// gulp.task("default",['任务名1','任务名2'])//gulp3写法
// gulp.task("default",gulp.series('任务名1','任务名2')) //gulp4写法
gulp.task("default",gulp.parallel('watch','js','css','html'))//异步执行
// gulp.task("default",gulp.series('js','less','css'))//同步按顺序执行


/**
 * 经常使用的gulp插件
 * 相关插件：
 *  gulp-concat:合并文件（js/css）
 *  gulp-uglify:压缩js文件
 *  gulp-rename:文件重命名
 *  gulp-less：编译less
 *  gulp-clear-css：压缩css
 *  gulp-watch:实时自动编译刷新
 */

/**
 * 重要api
 * gulp.src(filepath/pathArr):指向指定路径的所有文件，返回文件流对象；用于读取文件
 * gulp.dest(dirPath/pathArr):指向指定的所有文件夹；用于向文件夹中输出文件
 * gulp.task(name,[deps],fn):定义一个任务
 * gulp.watch():监视文件的变化
 * 
 */

/**
 * 下载插件(合并压缩js需要的插件)
 * npm install gulp-concat gulp-uglify gulp-rename --save-dev
 * 引入
 *  var concat = require('gulp-concat')
 *  var uglify = require('gulp-uglify')
 *  var rename = require('gulp-rename')
 */
/**
 * 对css进行合并压缩
 * 创建less/css文件
 *  src/css/test1.css
 *  src/css/test2.css
 *  src/less/test3.less
 * 下载合并压缩css、less所需插件
 *  npm install gulp-less gulp-clean-css --save-dev
 */

/**
 * 压缩html
 *  所需插件
 *  npm install gulp-htmlmin --save-dev
 *  
 */

/**
 * 自动编译
 * 所需插件
 *  npm install gulp-watch --save-dev
 *  
 */

 四、热加载、自动打开连接：

var gulp = require("gulp");//引入gulpvar concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less')
var cssClean = require('gulp-clean-css')
var htmlMin = require('gulp-htmlmin')
var watch = require('gulp-watch')
var connect = require('gulp-connect')
var open = require('open')

// 注册任务
// gulp.task("任务名",function(){
//     // 配置任务的操作
// })
// 注册合并js的任务
gulp.task("js",function(){
    // 配置任务的操作
    // return gulp.src("src/js/**/*.js");//深度遍历  能找到js文件第一层的js文件及更深层文件的js
    return gulp.src("src/js/*.js")//潜度遍历 只能遍历js第一层的js文件  找到目标源文件，将数据读取到gulp的内存中
            .pipe(concat('buld.js')) //临时合并文件 buld.js是合并之后的文件名
            .pipe(gulp.dest('dist/js/')) //临时输出到dist文件夹下的js文件中，没有js文件会自动创建
            .pipe(uglify())  //压缩文件
            // .pipe(rename('build.min.js')) //重命名
            .pipe(rename({suffix:'.min'})) //重命名 配置后缀名
            .pipe(gulp.dest('dist/js/'))//压缩文件输出路径
            .pipe(connect.reload()) //热加载
    

})
// 注册转换less的任务
gulp.task('less',function(){
    return gulp.src('src/less/*.less')
            .pipe(less()) //编译less文件为css文件
            .pipe(gulp.dest('src/css/')) //编译过的less文件输出到css文件夹下，后续和其它的css文件合并
            .pipe(connect.reload()) //热加载
})
// 注册合并压缩css任务
// gulp.task('css',['less'],fn);//中间有参数代表  先执行完less任务，再执行less任务，表示同步执行 gulp3写法
gulp.task('css',gulp.series('less',function(){//启动css任务之前先启动less gulp4写法
    return gulp.src('src/css/*.css')
            .pipe(concat('build.css')) //合并css 并命名
            .pipe(gulp.dest('dist/css/')) //输出合并后的css文件 可以不输出，直接输出压缩文件
            .pipe(cssClean({compatibility:'ie8'})) //压缩css  可以没有任何配置 直接执行cssClean(),加这个配置的意思是兼容到ie8
            .pipe(rename({suffix:'.min'})) //重命名文件 加.min后缀
            .pipe(gulp.dest('dist/css/')) //输出到build/css/文件件下
            .pipe(connect.reload()) //热加载
}))
// 注册压缩html任务
gulp.task("html",function(){
    return gulp.src("index.html")
            .pipe(htmlMin({collapseWhitespace:true})) //压缩html  collapseWhitespace代表去除空格 不加参数，和源文件压缩的和没压缩的没效果
            .pipe(gulp.dest("dist/"))
            .pipe(connect.reload()) //热加载
})

// 注册完任务，可以在命令行通过 gulp 任务名  来执行任务
// gulp的任务多的话，每次每个任务都通过  gulp 任务名来执行，会比较费时，可以通过默认任务来执行

// 注册监视任务(半自动)
gulp.task('watch',function(){//中间的参数表示 default任务执行完后再执行监视任务
    // 监视任务比较特殊
    // 这里不需要return
    // 确认监听的目标以及绑定相应的任务
    watch('src/js/*.js',gulp.series('js'));//当src/js/下的js文件发生变化时，启动相应的任务
    watch(['src/css/*.css','src/less/*.less'],gulp.series('css'));//当src下的less|css文件下的样式文件发生变化时，编译css文件，因为css启动之前先启动less，所以这里写一个css任务就够了
    
})
// 注册监视任务(全自动)
gulp.task('server',gulp.parallel('watch','js','css','html',function(){
    // 配置服务器的选项
    connect.server({
        root:"dist/",//资源根目录
        livereload:true,//实时刷新
        port:5001,//端口号
    });
    // 在每个任务下面铺一个管道
    // .pipe(connect.reload())
    // 输入gulp 命令后  访问localhost:5001就可以看到页面了，可以热加载了

    // open插接可以自动打开指定的连接
    open('http://localhost:5001/')
}))
// 注册默认任务
// gulp.series：按照顺序执行
// gulp.parallel ：可以并行计算
// gulp.task("default",['任务名1','任务名2'])//gulp3写法
// gulp.task("default",gulp.series('任务名1','任务名2')) //gulp4写法
gulp.task("default",gulp.series('server'))//异步执行
// gulp.task("default",gulp.series('js','less','css'))//同步按顺序执行


/**
 * 经常使用的gulp插件
 * 相关插件：
 *  gulp-concat:合并文件（js/css）
 *  gulp-uglify:压缩js文件
 *  gulp-rename:文件重命名
 *  gulp-less：编译less
 *  gulp-clear-css：压缩css
 *  gulp-watch:实时自动编译刷新
 */

/**
 * 重要api
 * gulp.src(filepath/pathArr):指向指定路径的所有文件，返回文件流对象；用于读取文件
 * gulp.dest(dirPath/pathArr):指向指定的所有文件夹；用于向文件夹中输出文件
 * gulp.task(name,[deps],fn):定义一个任务
 * gulp.watch():监视文件的变化
 * 
 */

/**
 * 下载插件(合并压缩js需要的插件)
 * npm install gulp-concat gulp-uglify gulp-rename --save-dev
 * 引入
 *  var concat = require('gulp-concat')
 *  var uglify = require('gulp-uglify')
 *  var rename = require('gulp-rename')
 */
/**
 * 对css进行合并压缩
 * 创建less/css文件
 *  src/css/test1.css
 *  src/css/test2.css
 *  src/less/test3.less
 * 下载合并压缩css、less所需插件
 *  npm install gulp-less gulp-clean-css --save-dev
 */

/**
 * 压缩html
 *  所需插件
 *  npm install gulp-htmlmin --save-dev
 *  
 */

/**
 * 自动编译
 * 所需插件
 *  npm install gulp-watch --save-dev
 *  
 */

/**
 * 热加载
 *  所需插件
 *  npm install gulp-connect --save-dev
 * 自动开启连接
 *  所需插件
 *  npm install open --save-dev
 *  用法
 *  open('http://localhost:5001/')
 */

 五、自动加载gulp包插件

var gulp = require("gulp");//引入gulp
var $ = require('gulp-load-plugins')()//自动加载gulp包插件

// var concat = require('gulp-concat');
// var uglify = require('gulp-uglify');
// var rename = require('gulp-rename');
// var less = require('gulp-less')
// var cssClean = require('gulp-clean-css')
// var htmlMin = require('gulp-htmlmin')
// var watch = require('gulp-watch')
// var connect = require('gulp-connect')
var open = require('open')

// 注册合并js的任务
gulp.task("js",function(){
    // 配置任务的操作
    return gulp.src("src/js/*.js")//潜度遍历 只能遍历js第一层的js文件  找到目标源文件，将数据读取到gulp的内存中
            .pipe($.concat('buld.js')) //临时合并文件 buld.js是合并之后的文件名
            .pipe(gulp.dest('dist/js/')) //临时输出到dist文件夹下的js文件中，没有js文件会自动创建
            .pipe($.uglify())  //压缩文件
            // .pipe(rename('build.min.js')) //重命名
            .pipe($.rename({suffix:'.min'})) //重命名 配置后缀名
            .pipe(gulp.dest('dist/js/'))//压缩文件输出路径
            .pipe($.connect.reload()) //热加载
    

})
// 注册转换less的任务
gulp.task('less',function(){
    return gulp.src('src/less/*.less')
            .pipe($.less()) //编译less文件为css文件
            .pipe(gulp.dest('src/css/')) //编译过的less文件输出到css文件夹下，后续和其它的css文件合并
            .pipe($.connect.reload()) //热加载
})
// 注册合并压缩css任务
gulp.task('css',gulp.series('less',function(){//启动css任务之前先启动less gulp4写法
    return gulp.src('src/css/*.css')
            .pipe($.concat('build.css')) //合并css 并命名
            .pipe(gulp.dest('dist/css/')) //输出合并后的css文件 可以不输出，直接输出压缩文件
            .pipe($.cleanCss({compatibility:'ie8'})) //压缩css  可以没有任何配置 直接执行cssClean(),加这个配置的意思是兼容到ie8
            .pipe($.rename({suffix:'.min'})) //重命名文件 加.min后缀
            .pipe(gulp.dest('dist/css/')) //输出到build/css/文件件下
            .pipe($.connect.reload()) //热加载
}))
// 注册压缩html任务
gulp.task("html",function(){
    return gulp.src("index.html")
            .pipe($.htmlmin({collapseWhitespace:true})) 
            .pipe(gulp.dest("dist/"))
            .pipe($.connect.reload()) //热加载
})

// 注册监视任务(半自动)
gulp.task('watch',function(){//中间的参数表示 default任务执行完后再执行监视任务
    // 确认监听的目标以及绑定相应的任务
    $.watch('src/js/*.js',gulp.series('js'));//当src/js/下的js文件发生变化时，启动相应的任务
    $.watch(['src/css/*.css','src/less/*.less'],gulp.series('css'));//当src下的less|css文件下的样式文件发生变化时，编译css文件，因为css启动之前先启动less，所以这里写一个css任务就够了
    
})
// 注册监视任务(全自动)
gulp.task('server',gulp.parallel('watch','js','css','html',function(){
    // 配置服务器的选项
    $.connect.server({
        root:"dist/",//资源根目录
        livereload:true,//实时刷新
        port:5001,//端口号
    });
    open('http://localhost:5001/')
}))
// 注册默认任务
gulp.task("default",gulp.series('server'))//异步执行

/**
 * 拓展
 *  打包加载gulp插件（自动加载用到的插件，不用手动引入）
 *  
 *  所需插件
 *  npm install gulp-load-plugins --save-dev
 *  引入
 *  var $ = require('gulp-load-plugins')()
 *  比如要使用 gulp-clean-css 插件；可以这样调用 $.cleanCss 注意小驼峰命名法  单词前后顺序不能变，否则就会报错
 *  将之前用到的gulp插件 用$.插件名 替换一下
 */

 

 完结

 

 

 

 

 

。