gulp打包项目

前言：习惯了webpack自动挡，我们来看看gulp手动挡如何打包。这里使用cnpm加快安装速度。

一、npm托管

1. 新建文件夹，webstorm或vscode切换到该文件夹下，执行如下命令

cnpm init

根据提示一步步操作，将工程交给npm托管 ，生成package.json文件

2. 在工程目录下创建src目录放自己的项目源代码

index.html为入口文件 

二、引入gulp

执行命令

cnpm install gulp --save-dev

--save-dev后缀一定要写，这样gulp会写到package.json文件

在项目根目录下建立gulpfile.js文件

三、引入gulp各个打包插件

方法一（懒人操作法）：

"dependencies": {
    "requirejs": "^2.3.6"
},
"devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-connect": "^5.7.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^5.0.3",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.2",
    "pump": "^3.0.0"
}

 直接复制到package.json，然后执行命令

cnpm install

这样就不用一个个导入了，方便快捷 

方法二（逐个导入）：

1. 引入requirejs

cnpm install requirejs

2. htmlmin（html压缩）

cnpm install gulp-htmlmin -D

3. uglify（js压缩）

cnpm i gulp-uglify -D

4. minify-css（css压缩）

cnpm i gulp-minify-css -D

5. imagemin（图片压缩）

cnpm i gulp-imagemin@5.0.3 -D

一定要加上版本号，高版本的启动会报错 

6. babel（js高级语法兼容）

cnpm i gulp-babel -D

cnpm install @babel/core @babel/preset-env -D

7. clean（清空文件） 

cnpm i gulp-clean -D

8. pump（泵）

cnpm i pump -D

9. connect（微服务）

cnpm i gulp-connect -D

10. 执行命令

cnpm install

四、写法和项目目录

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const uglify = require('gulp-uglify'); // 压缩js
const minifyCss = require('gulp-minify-css');
const imagemin = require('gulp-imagemin');
const babel = require('gulp-babel');
const clean = require('gulp-clean');
const pump = require('pump');
const connect = require('gulp-connect'); // gulp微服务

let dir = './distLWebProject/src/' // 目标路径

// 压缩 主页html文件
gulp.task('html', function () {
    return gulp.src('./src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,//清除html文件的空格
            minifyJS: true,//压缩html文件的js代码
            minifyCSS: true,//压缩html文件的css代码
            removeComments: true,//清除html文件的注释
            removeSciptTypeAttributes: true,//清除所有script标签中的type="text/javascript"属性
            removeStyleLinkTypeAttributes: true//清楚所有Link标签上的type属性
        }))
        .pipe(gulp.dest(dir))//最后输出文件保存在dist文件根目录中
})

// 压缩子页面的html
gulp.task('page', function () {
    return gulp.src('./src/page/app/**/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS: true,
            removeComments: true,
            removeSciptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }))
        .pipe(gulp.dest(dir + 'page/app'))
})

// 压缩js文件
gulp.task('js', function () {
    return gulp.src('./src/page/js/**/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(dir + 'page/js'))
})

//压缩css文件
gulp.task('css', function () {
    return gulp.src('./src/assets/css/**/*.css')
        .pipe(minifyCss())
        .pipe(gulp.dest(dir + 'assets/css/'))
})

//压缩图片
gulp.task('img', function () {
    return gulp.src('./src/assets/img/**/*.*')
        .pipe(imagemin({progressive: true}))
        .pipe(gulp.dest(dir + 'assets/img'))
})

// 压缩config文件夹
gulp.task('config', function () {
    return gulp.src('./src/config/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(dir + 'config'))
})

// 压缩router文件夹
gulp.task('router', function () {
    return gulp.src('./src/router/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(dir + 'router'))
})

// 压缩sysPage文件夹
gulp.task('sysPage', function () {
    return gulp.src('./src/sysPage/**/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS: true,
            removeComments: true,
            removeSciptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }))
        .pipe(gulp.dest(dir + 'sysPage'))
})

// 压缩third文件夹
gulp.task('third', function () {
    return gulp.src('./src/third/**/*')
        .pipe(gulp.dest(dir + 'third'))
})

// 压缩utils文件夹
gulp.task('utils', function () {
    return gulp.src('./src/utils/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(dir + 'utils'))
})

// 删除旧包
gulp.task('clean', function(cb) {
    pump([
        gulp.src(dir),
        clean()
    ], cb)
})

// 使用connect启动一个Web服务器
gulp.task('serve', function () {
    connect.server({
        host: 'localhost', // 10.9.10.10
        port: 3000,
        open: './index.html',
        root: 'src/',
        livereload: true
    });
});

// 默认命令
gulp.task('default', gulp.series('html', 'page', 'js', 'css', 'img', 'config', 'router', 'sysPage', 'third', 'utils', (done) => {
    done();
}));

 不清楚可以对照着项目目录和gulp.js写法看

五、启动、打包

启动命令

gulp serve

打包命令

gulp

六、配置nginx

 复制打包文件到服务器指定位置，然后配置nginx端口指向src文件夹下的index.html

例如：

server {
        listen       8093;
		server_name  web;
		
		gzip on;
		gzip_min_length 1k;
		gzip_comp_level 9;
		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.";
        
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\yjProjects\myGulp\distLWebProject\src;
            index  index.html index.htm;
        }
}

端口为8093，指向的目标index.html文件在 D:\yjProjects\myGulp\distLWebProject\src

---

总结

手动挡麻烦不少，估计也只有原生的js项目会用了。