gulp打包项目案例

目录结构

• 首先安装好 nodejs、在终端中使用 npm install gulp@3 --global 命令全局安装gulp
• 创建目录 myproject
• 在myproject目录下，在终端中执行 npm init -y 生成 package.json 文件、执行 npm install gulp@3 --save-dev 作为项目的开发依赖、并在该目录创建一个名为 gulpfile.js 的配置文件
• 创建 app 文件夹，为项目为打包的代码，在 app 目录下创建 static 文件夹及 views 文件夹，前者存放各类静态资源，看文件即可理解了，后者存放 html 文件
• build 和 dist 文件夹可以不用创建，打包项目时会自动创建，当然你也可以自己手动创建
• 在project目录下，在终端中执行以下命令安装各种编译插件
  npm install --save-dev gulp-uglify
  npm install --save-dev gulp-minify-css
  npm install --save-dev gulp-minify-html
  npm install --save-dev gulp-imagemin
  npm install --save-dev gulp-sass
  npm install --save-dev gulp-concat
  npm install --save-dev gulp-rename
  npm install --save-dev gulp-babel
  npm install --save-dev gulp-plumber
  npm install --save-dev gulp-run-sequence
  npm install --save-dev gulp-zip gulp-clean
  在这就先不解释这些做什么的，我会在代码中注释，这样更好理解

构建好目录后，将编写gulp配置文件 gulpfile.js

// 使用严格模式
'use strict';

// gulp模块
const gulp = require('gulp');

// 压缩js
const uglify = require('gulp-uglify');

// 压缩css
const minifyCss = require('gulp-minify-css');

// 压缩html
const minifyHtml = require('gulp-minify-html');

// 压缩图片
const imagemin = require('gulp-imagemin');

// 编译sass
const sass = require('gulp-sass');

// 文件合并（js、css）
const concat = require('gulp-concat');

// 重命名
const rename = require('gulp-rename');

// ES6转ES5
const babel = require('gulp-babel');

// 错误处理提示
const plumber = require('gulp-plumber');

// 控制task中的串行和并行。（gulp默认是并行）
// 串行是指多个任务时，各个任务按顺序执行，完成一个之后才能进行下一个。
// 并行指的是多个任务可以同时执行。
const runSequence = require('gulp-run-sequence');

//压缩文件
const zip = require('gulp-zip');

// 删除文件
const clean = require('gulp-clean');

// 自动刷新
var server = require('browser-sync').create();//执行函数返回对象

// 自动加载
// const load = require('gulp-load-plugins')();//立即执行之后得到一个加载对象


// 创建任务
gulp.task('js', function(){
    // 取得scripts下的所有为.js的文件（**/的意思是包含所有子文件夹)
    gulp.src('app/static/scripts/**/*.js')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //合并同一目录下的所有文件,并指定文件名
    .pipe(concat('main.js'))
    //js压缩
    .pipe(uglify())
    //将合并压缩后的文件输出到dist/static/scripts下（如没有dist目录则自动生成dist）
    .pipe(gulp.dest('dist/static/scripts'))
});

gulp.task('sass', function(){
    // 取得sass下的所有为.scss的文件（**/的意思是包含所有子文件夹)
    gulp.src('app/static/sass/**/*.scss')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //编译sass文件使其转换为css文件
    .pipe(sass())
    //合并同一目录下的所有文件,并指定文件名
    .pipe(concat('main.css'))
    //css压缩
    .pipe(minifyCss())
    //将合并压缩后的文件输出到dist/static/css下（假如没有dist目录则自动生成dist目录）
    .pipe(gulp.dest('dist/static/css'))
});

gulp.task('html', function(){
    // 首先取得app/views下的所有为.html的文件（**/的意思是包含所有子文件夹)
    gulp.src('app/views/**/*.html')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //html压缩
    .pipe(minifyHtml())
    //将压缩后的文件输出到dist/views下（假如没有dist目录则自动生成dist目录）
    .pipe(gulp.dest('dist/views'))
});

gulp.task('images', function(){
    // 首先取得app/static/images下的所有为.{png,jpg,jpeg,ico,gif,svg}后缀的图片文件（**/的意思是包含所有子文件夹)
    gulp.src('app/static/images/**/*.{png,jpg,jpeg,ico,gif,svg}')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.jpegtran({progressive: true}),
        imagemin.optipng({optimizationLevel: 6}),
        imagemin.svgo({
            plugins: [
                {removeViewBox: true},
                {cleanupIDs: false}
            ]
        })
    ]))
    //将压缩后的图片输出到dist/static/images下（假如没有dist目录则自动生成dist目录）
    .pipe(gulp.dest('dist/static/images'))
});

gulp.task('clean', function(){
    // 首先取得dist/*下的所有文件,read: false 返回空值，也就是并不会去读取文件
    gulp.src('dist/*', {read: false})
    //删除dist/*下的所有文件
    .pipe(clean())
})

gulp.task('build', function(){
    // 首先取得dist/*下的所有文件
    gulp.src('dist/*')
    //错误管理模块（有错误时会自动输出提示到终端上）
    .pipe(plumber())
    //将dist/*下的所有文件进行压缩打包生成为build.zip文件
    .pipe(zip('build.zip'))
    //将生成的build.zip文件输出到build下（假如没有build目录则自动生成build目录）
    .pipe(gulp.dest('build'))
})

gulp.task('watch', function(){
    //监听各个目录的文件，如果有变动则执行相应的任务操作文件
    gulp.watch('app/static/scripts/**/*.js',['js']);
    gulp.watch('app/static/sass/**/*.scss',['sass']);
    gulp.watch('app/views/**/*.html',['html']);
})

gulp.task('redist', function(){
    //先运行clean，然后并行运行html,js,sass,images,watch
    //如果不使用gulp-run-sequence插件的话，由于gulp是并行执行的
    //有可能会出现一种情况（其他文件处理速度快的已经处理完了，然后clean最后才执行，会把前面处理完的文件删掉，所以要用到runSequence）
    runSequence('clean', ['html', 'sass', 'js', 'images'],'watch')
})

//在终端上输入gulp命令，会默认执行default任务，并执行redist任务
gulp.task('default', ['redist']);

test.html文件内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../static/css/main.css">
</head>
<body>
<img src="../static/images/vip3.jpg" alt="">
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>

<script src="../static/scripts/main.js"></script>
</body>
</html>

sass目录下test1.scss和test2.scss的内容

test1.scss

body{
    .btn1{
        font-size: 22px;
        color: red;
    }
}

test2.scss

body{
    .btn2{
        font-size: 22px;
        color: blue;
    }
}

scripts目录下test1.js和test2.js的内容

test1.js

var btn1 = document.querySelector('.btn1');
btn1.onclick = function (){
    alert('点击按钮1');
};

test2.js

var btn2 = document.querySelector('.btn2');
btn2.onclick = function (){
    alert('点击按钮2');
};

• imges图片可自行找几张及可以了
• 在终端中执行 gulp 命令，则可编译整个项目，dist 目录下就能生成需要的东西，你可以执行 dist 目录下的.html文件即可查看项目的效果
• 在终端中执行 gulp build 命令，即可打包项目，打包项目即存放在 build 目录下

以上就是通过一个简单的案例，来学习gulp打包项目，希望看完这篇案例对你学习gulp有所帮助