laravel8.x使用gulp进行压缩资源

简单认识npm中的选项

在npm中
-D 就是 –save-dev的简写，
-S 就是 –save 的简写；
dev其实就是 develop的简写，也就是开发的意思
我们在安装工具包之前常常先写入npm init -y 来创建package.json帮我们记录包的名称以及版本号等等，而通过输入 -D 命令时，包的名称及版本号就会在 devDependencies 中显示，输入 -S 命令时，包的名称及版本号就在 dependencies 中显示。
devDependencies即开发依赖，只在开发时使用，产品上线时不需要
dependencies即生产依赖，在生产环境中使用。

创建 package.json文件

laravel8.x中已经有这个文件了，如果没有你则可以创建一个，如下操作

可以一步一步创建，也可以直接 npm init -y 一口气瞬间生成，我选择瞬间生成

安装gulp对应的插件

npm i -D gulp gulp-rename gulp-concat gulp-clean-css gulp-uglify gulp-imagemin gulp-htmlmin gulp-autoprefixer gulp-less gulp-babel --no-fund --no-audit

• gulp gulp主程序
• gulp-rename 重命名
• gulp-concat 合并文件
• gulp-clean-css 压缩css
• gulp-uglify 压缩js
• gulp-imagemin 压缩图片
• gulp-htmlmin 压缩html
• gulp-autoprefixer 解决css浏览器内核前缀
• gulp-less 把less编译成css
• gulp-babel 把es2015编译成浏览器认识的js插件

然后新建gulpfile.js文件

检查 gulp 是否安装成功

gulp --version 

上面这些基本就够了，如果不够自己再加，然后需要什么插件自己引入即可

注：gulp-minify-css已经被废弃， 推荐用gulp-clean-css，用法一致，gulp-minify-css 最终是调用clean-css

如果你之前安装的是 gulp-minify-css 可以 执行 npm uninsall gulp-minify-css 给卸载了

遇到的错误

TypeError: gulp.run is not a function

https://stackoverflow.com/questions/64087553/typeerror-gulp-run-is-not-a-function

First remake npm i . Second gulp.run is deprecated, you need just to use gulp.watch() and set an array of tasks as second params instead the callback, in your case here :

gulp.watch(’./*.js’, [‘default’,‘backupHomeDir’]);
complete:

var gulp = require(‘gulp’);
gulp.task(‘default’, function () {
return gulp.src(’./.js’) // read all
.pipe(gulp.dest(’/media/m/sdd2 ntfs/backup/home/’));
});
gulp.watch(’./.js’, gulp.series(‘default’));

The following tasks did not complete: Did you forget to signal async completion?

https://blog.csdn.net/qq_37855074/article/details/98623740

还知道了gulp-minify-css被gulp-clean-css替换

https://blog.csdn.net/u013063153/article/details/52796969

还知道了gulp压缩js 怎么指定不压缩.min.js

https://segmentfault.com/q/1010000008669484

gulp4.0报错‘The following tasks did not complete: …’

https://blog.csdn.net/qq_41208114/article/details/79109269

gulp报错task function must be specified

https://www.cnblogs.com/murenziwei/p/10543765.html

拓展用法吧

https://blog.csdn.net/qq_26536483/article/details/79931278

gulpjs中文网教程

https://www.gulpjs.com.cn/docs/getting-started/quick-start/

解决内核前缀问题 https://segmentfault.com/q/1010000005990823

最终摸索的一些写法

// 引入 gulp
const gulp = require('gulp');
// 引入组件
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('min_css', function () {
   
    return gulp.src(['public/home/css/*.css', '!public/home/css/*.min.css', '!public/home/css/bootstrap.min.css'])
        .pipe(autoprefixer({
                              // 调用 gulp-autoprefixer 插件
            overrideBrowserslist: ['last 2 versions', '> 5%'],         // 定义浏览器参数
            cascade: true,                                     // 是否添加浏览器前缀，默认：true
            remove: true                                       // 是否移除不必要的浏览器前缀，默认：true
        }))
        .pipe(cleanCss())
        //设置压缩后重命名
        .pipe(rename({
   suffix: '.min'}))
        .pipe(gulp.dest('public/home/css'));
});


// 合并、重命名css
gulp.task('merge_css',