Gulp各种疑难杂症

华飞驰

2023-12-01

什么是Gulp？如何使用Gulp

Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。

使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。

例如：你可以用gulp可以网页自动刷新，和MVVM开发模式很相似，如果你对vue.js有所了解的话，那么你一定不会陌生。你也可以使用gulp对sass进行预处理、代码检测、图片优化压缩、只需要一个简单的指令就能全部完成。

由于gulp是基于node.js开发的，所以你在使用gulp之前，必须要先安装node。然后你可以打开node服务器并执行 npm install gulp -g 全局安装gulp.

之后你需要创建一个工程目录，通过dos命令，进入刚创建好的工程目录，

然后执行npm init 创建package.json文件. 这个文件保存着你目录下的项目模块的相关信息。可以把它想象成你所用到模块儿的一个目录.

然后执行npm intall gulp --save-dev 本地安装gulp
在工程根目录下手动创建gulpfile.js文件。
然后你可以在gulpfile.js里最先引入gulp模块，在js文件中添加以下内容：

const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const babel=require('gulp-babel');
const sourcemaps=require('gulp-sourcemaps');
const cssmin=require('gulp-cssmin');
const imagemin=require('gulp-imagemin');
const htmlmin = require('gulp-htmlmin');
const connect=require('gulp-connect');
const clean=require('gulp-clean');
const revCollector = require('gulp-rev-collector');
 
const js_path=['./src/js/**/*.js'];

 
// 压缩html
gulp.task('html',function(){
    const options = {
        collapseWhitespace:true,
        collapseBooleanAttributes:true,
        removeComments:true,
        removeEmptyAttributes:true, //清除所有的空属性
        removeScriptTypeAttributes:true,
        removeStyleLinkTypeAttributes:true,
        minifyJS:true,//压缩html中的javascript代码。
        minifyCSS:true //压缩html中的css代码。
    };
    return gulp.src('./src/*.html')
    .pipe(htmlmin(options))
    .pipe(revCollector({
        replaceReved:true
    }))
    .pipe(gulp.dest('./dist'))
    .pipe(connect.reload());
})
 
// 压缩js
gulp.task('js', ()=>{
  return gulp.src(js_path)
    .pipe(sourcemaps.init())
    // babel编译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // concat会作合并，合并为1个js
    .pipe(concat('bundle.min.js'))    
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/js/'))
    .pipe(connect.reload());
});
 
// 压缩style-css
gulp.task('style', ()=>{
    return gulp
      .src(['./src/css/**/*.css'])
      .pipe(concat('style.min.css'))
       // cssmin css压缩
      .pipe(cssmin())
      .pipe(gulp.dest('./dist/css/'))
      .pipe(connect.reload());
});
 
// 压缩images
gulp.task('images', ()=>{
    return gulp
        .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png'])
        .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.mozjpeg({
progressive: true,
}),
        imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest('./dist/img/'));
});
 
gulp.task('watchs',function(){
    gulp.watch('./src/*.html', gulp.series('html'));
    gulp.watch('./src/css/**/*.css', gulp.series('style'));
    gulp.watch('./src/js/**/*.js', gulp.series('js'));
});
 
gulp.task('connect:app',function(){
    connect.server({
        root:'src',//根目录
        // ip:'192.168.3.162', 默认localhost
        livereload:true,//自动更新
        port:9999//端口
    })
})
 
gulp.task('connect:dist',function(cb){
    connect.server({
        root:'src',
        livereload:true,
        port:9999
    })
 
    cb(); //执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})
 
gulp.task('clean:app', function() {
    return gulp.src('dist', {read: false})
        .pipe(clean());
})
 
//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行
gulp.task('default', gulp.series(gulp.parallel('html','style','js','images')));
 
gulp.task('init', gulp.series('clean:app', gulp.parallel('html','style','js','images')));
 
//启动任务connect:app服务，并监控变化
gulp.task('dev', gulp.series('init', 'connect:app', 'watchs'));
 
// 生成打包文件
gulp.task('build', gulp.series('init'));
 
//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('server', gulp.series('connect:dist', 'build', 'watchs'));

第一次玩gulp，可把我整疯了。
一开始的目的：优化博客网站的速度。结果一直在倒腾gulp工具的安装。
第一个问题： Error: Cannot find module ‘@babel/core’

{ Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\hexo_blog\blog\node_modules\gulp-babel\index.js:7:15)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }

这个问题网上千篇一律的解决办法最后无果，最终这个方法不错：
gulp打包是不兼容ES6的，需要使用gulp-babel插件转义后方可打包。依次安装：

npm install gulp-babel --save-dev
 
npm install babel-preset-env --save-dev
 
npm install babel-core --save-dev

另外，还需要在根目录下加 .babelrc 文件，内容是

{
    "presets": ["env"]
}

第二个问题：安装完后，执行 gulp。。。无语了，这咋又开始少模块了捏。没办法少了啥，继续装啥，装完一个继续执行gulp，一直提示缺模块，那就一直盘。

PS D:\hexo_blog\blog> gulp
{ Error: Cannot find module 'gulp-sourcemaps'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\hexo_blog\blog\gulpfile.js:5:18)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }

装了一个还少了，我不知道我输了多少次npm install gulp-* --save-dev

{ Error: Cannot find module 'gulp-*'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\hexo_blog\blog\gulpfile.js:10:13)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }

成功了！当装完最后一个modile之后，执行gulp。似乎不缺了！好像行了惹！到点了，下班。。

PS D:\hexo_blog\blog> gulp
[23:56:37] Using gulpfile D:\hexo_blog\blog\gulpfile.js
[23:56:37] Starting 'default'...
[23:56:37] Starting 'html'...
[23:56:37] Starting 'style'...
[23:56:37] Starting 'js'...
[23:56:37] Starting 'images'...
[23:56:38] Finished 'html' after 1 s
[23:56:38] Finished 'style' after 1 s
[23:56:38] Finished 'js' after 1.01 s
[23:56:38] gulp-imagemin: Minified 0 images
[23:56:38] Finished 'images' after 1.01 s
[23:56:38] Finished 'default' after 1.01 s
PS D:\hexo_blog\blog>

Gulp各种疑难杂症

相关阅读

相关文章

相关问答

相关文档