gulp-前端打包工具

gulp介绍

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 
在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。
而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。

gulp安装

1、安装node 安装 方法请自行百度
2、全局安装gulp

然而由于众所周知的原因，国内到 npm 服务器的连接很不稳定,所有这里推荐一个简单的方案使用淘宝镜像
npm install cnpm -g --registry=https://registry.npm.taobao.org
接下来全局安装gulp
cnpm i gulp -g 

gulp相关插件的介绍

gulp插件用法比较简单,下面主要介绍一下一些插件的用途

1、del 删除文件，用于清空文件

2、browser-sync 用于自动刷新浏览器，从此再也不用F5手动刷新了

3、gulp-htmlmin 用于压缩html

4、gulp-clean-css 压缩css

5、gulp-uglify 压缩js

6、gulp-replace 替换路径

7、gulp-base64 将小图背景图转为base64的形式，可以自己设置最大多少尺寸转为base64

8、gulp-imagemin 压缩图片大小，不过效果不明显，还需要自己再处理一下图片

其他想用的插件可以自己去找，基本可以项目的需要，不够就去加就行

个人配置希望帮助到大家

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('./*.html')
        .pipe(htmlmin(options))
        .pipe(revCollector({
            replaceReved: true
        }))
        .pipe(gulp.dest('./dist'))
        .pipe(connect.reload());
})

// 压缩js
gulp.task('js', () => {
    return gulp.src('./js/*.js')
        .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(['./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(['./images/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png'])
        .pipe(imagemin([
            imagemin.gifsicle({ interlaced: true }),
            imagemin.jpegtran({ propressive: true }),
            imagemin.optipng({ optimizationLevel: 5 })
        ]))
        .pipe(gulp.dest('./dist/img/'));
});

gulp.task('watchs', function() {
    gulp.watch('./*.html', gulp.series('html'));
    gulp.watch('./css/**/*.css', gulp.series('style'));
    gulp.watch('./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'))

package.json信息

{
    "name": "gulp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "gulp dev",
        "build": "gulp build",
        "server": "gulp server"
    },
    "author": "handsome",
    "license": "ISC",
    "dependencies": {
        "@babel/core": "^7.4.5",
        "@babel/preset-env": "^7.4.5",
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        "gulp-clean": "^0.4.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect": "^5.7.0",
        "gulp-cssmin": "^0.2.0",
        "gulp-htmlmin": "^5.0.1",
        "gulp-imagemin": "^6.0.0",
        "gulp-rev-collector": "^1.3.1",
        "gulp-sourcemaps": "^2.6.5",
        "gulp-uglify": "^3.0.2"
    }
}

谢谢观看，如有不足，敬请指教