关于gulp使用，你应该了解这些 ——压缩一般的项目

Haile ·

更新时间:2024-11-13

· 624 次阅读

gulp-用自动化构建工具增强你的工作流程！
首先检查有没有安装node，node自带有包管理工具npm
没有的话可以去node官网下载，版本号为偶数是稳定版
cmd进入命令行输入 node -v 显示版本号表示node安装成功
npm -v 同样显示版本号为成功
好了，现在准备工作都做好了，可以开始使用了
都是在cmd用命令行操作

一.全局安装gulp

npm install -g gulp

任意目录下都可以

二.进入你的项目目录安装

如果没有初始化项目的先在命令行输入

npm init

一直回车到yes；这会使你的项目有一个叫package.json的文件，里面是你项目的包和各种信息，可以在里面查看你的插件有没有安装成功

1.将gulp作为你项目的开发依赖安装到开发环境

npm install gulp --save-dev

gulp的安装不能简写后面的包可以简写 install为 i

2.根据你的开发目录安装插件进行压缩

在这里插入图片描述
这里我将对font下面的文件夹的内容进行压缩打包到线上

3.新建一个gulpfile.js的文件在项目的根目录下

里面会写入执行压缩的代码

三、开始压缩文件 -进入项目目录打开cmd操作 1.压缩html -安装插件 gulp-minify-htm

npm i gulp-minify-htm -D

简写安装到开发环境

gulpfile.js 文件写入
解释一下gulp.src()里面的目录是开发目录的文件
gulp.dest()里面的目录是你要压缩到线上的目录

const gulp = require("gulp");
const html = require('gulp-minify-html');
gulp.task('uglifyhtml', () => {
    return gulp.src('src/html/*.html')
        .pipe(html())//执行压缩
        .pipe(gulp.dest('online/html/'));
});

然后保存 cmd 输入

gulp uglifyhtml

–task 后面是任务名

2.压缩css -安装插件 gulp-minify-css

cmd

npm i gulp-minify-css -D

gulpfile.js 写入

const css = require('gulp-minify-css');
gulp.task('uglifycss', () => {
    return gulp.src('src/style/*.css')
        .pipe(css())//执行压缩
        .pipe(gulp.dest('online/style/'));
})

然后保存 cmd 输入

gulp uglifycss

3.压缩js

这个稍显麻烦
安装三个插件 gulp-uglify gulp-babel babel-preset-es2015
cmd

npm i gulp-uglify -D
npm i gulp-babel -D
npm i babel-preset-es2015 -D

避免 gulp-babel 编译时出现Cannot find module ‘@babel/core’， gulp-babel 的版本建议安装7.0.1

npm install gulp-babel@7 --save-dev

都安装完毕，需要在根目录下新建一个文件 .babelrc
写入

{
    "presets": ["es2015"]
  }

gulpfile.js 写入

const script = require('gulp-uglify'); //js压缩
const babel = require("gulp-babel");
gulp.task('uglifyjs', () => {
    return gulp.src('src/script/*.js')
        .pipe(babel({//先将es6转换成es5
            presets: ['es2015']//es2015->es6  es2016->es7...
        }))
        .pipe(script())//再执行压缩
        .pipe(gulp.dest('online/script/'));
});

cmd

gulp uglifyjs

4.压缩sass

安装插件 gulp-sass gulp-sourcemaps gulp-load-plugins
cmd

npm i gulp-sass -D
npm i gulp-sourcemaps -D
npm i gulp-load-plugins -D

如果安装出错可以利用nrm cnpm 切换着用，还不行就可以看我之前的博客，有一个解决方法

gulpfile.js 写入

const sass = require('gulp-sass');
//引入生成.map文件模块
const sourcemaps = require('gulp-sourcemaps');
//生成.map文件
const plugins = require('gulp-load-plugins')();//返回的是一个函数体。需要再次执行。
gulp.task('compilesass', () => {
    return gulp.src('src/sass/*.scss')
        //初始化gulp-sourcemaps插件
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass({
            outputStyle: 'compressed'
        }))
        //通过sourcemaps,生成.map文件
        .pipe(plugins.sourcemaps.write('.'))
        .pipe(gulp.dest('online/sass/'));
});

cmd

gulp compilesass

5.压缩图片 gulp-imagemin

cmd

npm i gulp-imagemin -D

gulpfile.js 写入

const imagemin = require('gulp-imagemin');//gulp-imagemin图片压缩(png)
gulp.task('uglifyimg', () => {
    return gulp.src('src/img/*.{png,gif,jpg,ico}')
        .pipe(imagemin())//执行压缩
        .pipe(gulp.dest('online/img/'));
});

cmd

gulp uglifyimg

6.实现监听 gulp-watch

想要改变文件又不想重复压缩，就可以安装这个；
不过这个任务必须等你要监听的任务跑过第一遍它才会记录监听
cmd

npm i gulp-watch -D

gulpfile.js写入

const watch = require('gulp-watch');
gulp.task('default', function () {
    watch(['src/html/*.html', 'src/style/*.css', 'src/script/*.js','src/sass/*.scss', 'src/img/*.{png,gif,jpg,ico}'], gulp.parallel('uglifyhtml', 'uglifycss', 'uglifyjs', 'compilesass','uglifyimg'));
});

这个default是默认任务名执行只需要在cmd敲入 gulp即可，当然也可以加上名字

gulp

最后就可以压缩打包到线上目录了，关于插件的安装和执行任务如果失败了，就多安装几次，最后一个任务一个任务的试，gulpfile里只要有一个插件写入有问题，其他任务都跑不起来。
整理一下gulpfile.js文件

const gulp = require("gulp");
const html = require('gulp-minify-html');//压缩html的插件
const css = require('gulp-minify-css');//压缩css的插件
const script = require('gulp-uglify'); //js压缩
const babel = require("gulp-babel");
const watch = require('gulp-watch');
const imagemin = require('gulp-imagemin');//gulp-imagemin图片压缩(png)
//sass编译
//gulp-sass gulp-sourcemaps gulp-load-plugins 
const sass = require('gulp-sass');
//引入生成.map文件模块
const sourcemaps = require('gulp-sourcemaps');
//生成.map文件
const plugins = require('gulp-load-plugins')();//返回的是一个函数体。需要再次执行。
//1.压缩js并且将es6转化为es5
gulp.task('uglifyjs', () => {
    return gulp.src('src/script/*.js')
        .pipe(babel({//先将es6转换成es5
            presets: ['es2015']//es2015->es6  es2016->es7...
        }))
        .pipe(script())//再执行压缩
        .pipe(gulp.dest('online/script/'));
});
// gulp - sass gulp - sourcemaps gulp - load - plugins
//2.压缩sass
gulp.task('compilesass', () => {
    return gulp.src('src/sass/*.scss')
        //初始化gulp-sourcemaps插件
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass({
            outputStyle: 'compressed'
        }))
        //通过sourcemaps,生成.map文件
        .pipe(plugins.sourcemaps.write('.'))
        .pipe(gulp.dest('online/sass/'));
});
//3.压缩html
gulp.task('uglifyhtml', () => {
    return gulp.src('src/html/*.html')
        .pipe(html())//执行压缩
        .pipe(gulp.dest('online/html/'));
});
//4.压缩css
gulp.task('uglifycss', () => {
    return gulp.src('src/style/*.css')
        .pipe(css())//执行压缩
        .pipe(gulp.dest('online/style/'));
})
//5.图片压缩插件-imagemin@6
//对png最大的压缩，其他的格式几乎压不动。
gulp.task('uglifyimg', () => {
    return gulp.src('src/img/*.{png,gif,jpg,ico}')
        .pipe(imagemin())//执行压缩
        .pipe(gulp.dest('online/img/'));
});
//6.监听
//参1:监听的目录，数组的形式
//参2:通过gulp.parallel()并行监听任务名。
//监听上面的任务，监听之前任务必须先跑一次。再进行监听。
gulp.task('default', function () {
    watch(['src/html/*.html', 'src/style/*.css', 'src/script/*.js','src/sass/*.scss', 'src/img/*.{png,gif,jpg,ico}'], gulp.parallel('uglifyhtml', 'uglifycss', 'uglifyjs', 'compilesass','uglifyimg'));
});

作者：slowCoder

压缩 gulp

1024 个赞