gulp 是一个基于node的自动化打包构建工具，前端开发者可以使用它来处理常见任务：
创建项目
进入项目
npm init -ynpm i gulp -g （使用命令 gulp）npm i gulp -D # 开发依赖（前端工具都是开发依赖 本地安装 代码加载模块）npm i axios #npm i axios --save 项目依赖-线上项目依赖（线上的代码需要用到 比如 axios）#dev 开发环境 源代码 - 使用一个工具 gulp把代码进行压缩#test 测试环境#生产环境 线上 css，js，html 压缩 不需要使用gulp项目根目录中创建 gulpfile.js
const gulp = require('gulp');
gulp.task('tname',function(cb){//任务代码cb()
})
在终端中：gulp tnamegulp.task('tname',function(){//任务代码console.log('t1')console.log('t2')// 1-获取对应的文件gulp.src('src/js/*.js') //文件流// 2-管道里 做一个处理 压缩处理 安装插件// .pipe(调用一个插件)// 3-管道存放到另一个地方.pipe(gulp.dest('dist/js'))})安装编译压缩 scss 插件
npm install sass gulp-sass --save-devvar sass = require('gulp-sass')(require('sass'))
// 定义一个任务
gulp.task('scss', function (cb) {//任务代码console.log('任务代码scss');gulp.src('./src/scss/**/*.scss')//获取文件.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))//通过gulp插件处理文件.pipe(gulp.dest('./src/css'))//把处理之后的文件 放到 dist/js下.pipe(gulp.dest('./dist/css'))//把处理之后的文件 放到 dist/js下cb()
})gulp.task('w', function (cb) {// 监听路径下scss文件，一旦文件有变化，执行scss任务// console.log('开始监听scss文件的变化');gulp.watch('./src/scss/**/*.scss', gulp.parallel(['scss']));cb()
})安装压缩 js 插件
npm i gulp-uglify -D
在文件中定义任务
var gulp = require("gulp");
var uglify = require("gulp-uglify");
gulp.task("js", function () {console.log("js任务代码");gulp.src("./src/js/*.js").pipe(uglify()).pipe(gulp.dest("./dist/js"));
});
在终端中输入 gulp js 执行任务
编译js 高版本js转低版本
npm install --save-dev gulp-babel @babel/core @babel/preset-env
const babel = require('gulp-babel');
gulp.task('babel', () =>gulp.src('src/js/**/*.js').pipe(babel({presets: ['@babel/env']})).pipe(gulp.dest('dist/js'))
);
// 压缩js npm install --save-dev gulp-uglifyvar uglify = require('gulp-uglify');
gulp.task('compress',function(){// 获取js文件gulp.src('./src/js/**/*.js')// 转译插件 高版本js 转出 es5.pipe(babel({presets: ['@babel/env']}))// es5代码 压缩.pipe(uglify())// 输出到 dist.pipe(gulp.dest('./dist/js'))
})
npm install gulp-concat -D
// 合并js
var concat = require('gulp-concat');
gulp.task('concat', function (cb) {// 获取要合并的js文件gulp.src((['./src/js/login/login-a.js', './src/js/login/login-b.js']))// 合并.pipe(concat('login.js'))// 输出.pipe(gulp.dest('./src/js'))cb()
})
npm install gulp-htmlmin -D
//gulp-htmlmin 压缩html
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin', function() {gulp.src('src/**/*.html')
// 压缩html代码 去掉了 空格和换行.pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest('dist'));
})
npm install gulp-connect -D
var connect = require("gulp-connect");// 刷新任务
gulp.task("reload", function () {gulp.src("./src/**/*.html").pipe(connect.reload());
});gulp.task('w', function (cb) {// 启动一台http服务器connect.server({livereload: true,});// 监听路径下scss文件，一旦文件有变化，执行scss任务// console.log('开始监听scss文件的变化');gulp.watch('./src/scss/**/*.scss', gulp.parallel(['scss']));gulp.watch('src/*.html', gulp.parallel(['minify']));gulp.watch('src/js/*.js', gulp.parallel(['js']));gulp.watch('src/js/login/*.js', gulp.parallel(['concat']));// 监听所有文件的变化gulp.watch('src/**/*.*', gulp.parallel(['reload']))cb()
})
npm i gulp-imagemin -D
npm i gulp-imagemin@7 -D
const imagemin = require('gulp-imagemin');
gulp.task('imagemin', function () {gulp.src('src/images/*').pipe(imagemin()).pipe(gulp.dest('dist/images'))
})
打包任务
gulp.task('build', gulp.series(['js', 'sass', 'minify']), function () {console.log('项目的构件压缩完毕！');})网址：gulp.js - 基于流(stream)的自动化构建工具 | gulp.js中文网
