gulp browser-sync 完整配置 浏览器自动刷新

其他 2018-07-28 01:09:02 阅读次数: 0

gulp 完整配置模板

适用于一般项目，（可以使用 jquery swiper 等插件，如需使用 react angular 等 需要添加配置）

源码地址

1. 项目目录结构

    |-- app                     // 源码
        |-- _data               // json 数据
        |-- imgs                // 图片
        |-- libs                // 插件
        |-- scripts             // js文件
        |-- styles              // css文件
        |-- tpl                 // 二级页面等
        |-- index.html          // 网站主页面
    |-- config                  
        |-- pluginConfig.js     // gulp 插件配置项
    |-- dev                     // 编译后目录
    |-- build                   // 生产版本
    |-- .eslintrc               // eslint规则
    |-- .eslintignore           // eslint忽略文件
    |-- .gitignore              // git提交忽略文件
    |-- gulpfile.babel.js       // gulp配置
    |-- package.json            // npm包
    |-- README.md               // 项目说明
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

2. npm 安装 插件版本

  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-1": "^6.22.0",
    "browser-sync": "^2.18.8",
    "cross-env": "^3.2.4",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-babel": "^6.1.2",
    "gulp-cache": "^0.4.6",
    "gulp-changed": "^2.0.0",
    "gulp-clean-css": "^3.0.3",
    "gulp-concat": "^2.6.1",
    "gulp-eslint": "^3.0.1",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-md5-assets": "^0.2.0",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.1.0",
    "run-sequence": "^1.2.2"
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

3. 编写插件配置文件 /config/pluginConfig.js

    // gulp-htmlmin 压缩 html
    exports.htmlmin = {
       removeComments: true,
       collapseWhitespace: true,
       removeScriptTypeAttributes: true,
       removeStyleLinkTypeAttributes: true,
       minifyJS: true,
       minifyCSS: true
    };

    // gulp-autoprefixer 添加浏览器前缀
    exports.autofx = {
       browsers: [
          'ie >= 9',
          'ie_mob >= 10',
          'ff >= 30',
          'chrome >= 34',
          'safari >= 7',
          'opera >= 23',
          'ios >= 7',
          'android >= 4.4',
          'bb >= 10'
       ],
       cascade: true,
       remove: true
    };

    // gulp-clean-css 压缩 css
    exports.cleanCSS = {
       compatibility: 'ie8',
       keepSpecialComments: '*'
    };

    // gulp-uglify 压缩 js
    exports.uglify = {
       mangle: {
          except: ['require', 'exports', 'module', '$']
       }
    };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

4. gulp 配置 /gulpfile.babel.js

说明

/dev 中文件用于，实时编译后执行；/build 中文件用于 压缩后输出生产版本

    const gulp = require('gulp');
    const changed = require('gulp-changed');    // 只编译改动过的文件
    const htmlmin = require('gulp-htmlmin');    // html 压缩
    const sass = require('gulp-sass');          // 编译 sass
    const autofx = require('gulp-autoprefixer');    // css 浏览器前缀补全
    const cleanCSS = require('gulp-clean-css');     // 压缩 css
    const eslint = require('gulp-eslint');          // js 代码检查
    const babel = require('gulp-babel');            // 编译 es6 代码
    const uglify = require('gulp-uglify');          // js 压缩
    const imagemin = require('gulp-imagemin');      // 图片压缩
    const cache = require('gulp-cache');            // 图片缓存，图片替换了才压缩
    const runSequence = require('run-sequence');    // 设定同步异步执行任务
    const md5 = require('gulp-md5-assets');         // 添加 md5
    const concat = require('gulp-concat');          // 合并文件
    const del = require('del');                     // 删除文件
    const browserSync = require('browser-sync').create();   // 静态服务器
    const reload = browserSync.reload;

    const config = require('./config/pluginConfig');    // 引入插件的配置

    // 转移 html --> (/dev)
    gulp.task('move-html', () => {
        return gulp
            .src('./app/**/*.html')
            .pipe(changed('./dev'))
            .pipe(gulp.dest('./dev'));
    })

    // 压缩 html --> (/build)
    gulp.task('minify-html', ['move-html'], () => {
        return gulp
            .src('./dev/**/*.html')
            .pipe(htmlmin(config.htmlmin))
            .pipe(gulp.dest('./build'))
            .pipe(md5(10));
    })

    // 编译 sass --> (/dev)
    gulp.task('sass', () => {
        return gulp
            .src('./app/styles/**/*.scss')
            .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
            .pipe(autofx(config.autofx))
            .pipe(gulp.dest('./dev/styles'))
            .pipe(reload({stream: true}));
    })

    // 压缩 css --> (/build)
    gulp.task('minify-css', ['sass'], () => {
        return gulp
            .src('./dev/styles/**/*.css')
            .pipe(cleanCSS(config.cleanCSS))
            .pipe(gulp.dest('./build/styles'))
            .pipe(md5(10, './build/**/*.html'));   // 查找对应文件，替换为添加md5的文件名
    })

    // 编译 js --> (/dev)
    gulp.task('babel-js', () => {
        return gulp
            .src('./app/scripts/**/*.js')
            .pipe(eslint())
            .pipe(eslint.format())  // 错误格式化输出
            .pipe(changed('./dev/scripts'))
            .pipe(babel({
                presets: ['es2015', 'stage-1']
            }))
            .pipe(gulp.dest('./dev/scripts'))
            .pipe(reload({stream: true}));
    })

    // 压缩js --> (/build)
    gulp.task('minify-js', ['babel-js'], () => {
        return gulp
            .src('./dev/scripts/**/*.js')
            .pipe(uglify(config.uglify))
            .pipe(gulp.dest('./build/scripts'))
            .pipe(md5(10, './build/**/*.html'));
    })

    // 转移图片 --> (/dev)
    gulp.task('move-img', () => {
        return gulp
            .src('./app/imgs/**/*.{png,jpg,gif,ico}')
            .pipe(changed('./dev/imgs'))
            .pipe(gulp.dest('./dev/imgs'))
            .pipe(reload({stream: true}));
    })

    // 压缩图片 --> (/build)
    gulp.task('minify-img', ['move-img'], () => {
        return gulp
            .src('./dev/imgs/**/*.{png,jpg,gif,ico}')
            .pipe(cache(imagemin({
                progressive: true, 
                optimizationLevel: 5
            })))
            .pipe(gulp.dest('./build/imgs'))
            .pipe(md5(10, './build/**/*.{css,js,html,json}'));
    })

    // json 转移 --> (/dev)
    gulp.task('move-json', () => {
        return gulp
            .src('./app/_data/*.json')
            .pipe(gulp.dest('./dev/_data'))
            .pipe(reload({stream: true}));
    })

    // json 转移至 build --> (/build)
    gulp.task('build-json', () => {
        return gulp
            .src('./app/_data/*.json')
            .pipe(gulp.dest('./build/_data'))
            .pipe(md5(10, './build/**/*.js'));
    })

    // 转移 libs 插件 (libs 中引入的都是压缩后的文件)
    gulp.task('move-libs-dev', () => {
        return gulp.src('./app/libs/**/*')
            .pipe(gulp.dest('./dev/libs'));
    })

    gulp.task('move-libs-build', () => {
        return gulp.src('./app/libs/**/*')
            .pipe(gulp.dest('./build/libs'))
            .pipe(md5(10, './build/**/*.html'))
    })

    // 清空文件夹
    gulp.task('clean-dev', (cb) => {
        return del(['./dev/**/*'], cb);
    })

    gulp.task('clean-build', (cb) => {
        return del(['./build/**/*'], cb);
    })

    // 命令行命令
    /* 
        编译 
        清空 /dev 文件夹，将 html、编译后的css、编译后的js、libs中文件、图片、json文件引入
    */
    gulp.task('dev', (cb) => {
        // [] 中任务是并行的，其他按照先后顺序执行
        runSequence('clean-dev', 'move-html', [     
            'sass', 'babel-js', 'move-libs-dev'
        ], 'move-img', 'move-json', cb)
    })

    // 测试执行
    gulp.task('run', () => {
        browserSync.init({      // 启动Browsersync服务
            server: {
                baseDir: './dev',   // 启动服务的目录 默认 index.html    
                index: 'index.html' // 自定义启动文件名
            },
            open: 'external',   // 决定Browsersync启动时自动打开的网址 external 表示 可外部打开 url, 可以在同一 wifi 下不同终端测试
            injectChanges: true // 注入CSS改变
        });

        // 监听文件变化，执行相应任务
        gulp.watch('./app/styles/**/*.scss', ['sass']);
        gulp.watch('./app/scripts/**/*.js', ['babel-js']);
        gulp.watch('./app/imgs/**/*.{png,jpg,gif,ico}', ['move-img']);
        gulp.watch('./app/_data/*.json', ['move-json']);
        gulp.watch('./app/**/*.html', ['move-html']).on('change', reload);
    })

    /*
        压缩输出
        清空 /build 文件夹，压缩html、压缩css、压缩js、引入libs中文件、引入压缩后图片、引入json，同时添加MD5
    */
    gulp.task('build', (cb) => {
        runSequence('clean-build', 'minify-html', [
            'minify-css', 'minify-js', 'move-libs-build'
        ], 'minify-img', 'build-json', cb)
    })

    // 生产版本测试
    gulp.task('build-test', ['build'], () => {
        // 生产版本不允许更改文件后实时编译输出
        browserSync.init({
            server: {
                baseDir: './build'
            },
            open: 'external'
        });
    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189

5. eslint 配置 .eslintrc

    {
      "env": {
        "es6": true,
        "browser": true
      },
      "extends": "eslint:recommended",
      "rules": {
        "no-console": 0
      },
      "globals": { // 需要设置全局变量的放在这里
         "Swiper": true,
         "$": true,
         "jquery": true
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

6. 使用 npm 的 package.json 定义脚本命令

在 package.json中 scripts字段下定义：

    "scripts": {
        "dev": "gulp dev",
        "run": "gulp run",
        "build": "cross-env NODE_ENV='production' gulp build",
        "build-test": "cross-env NODE_ENV='production' gulp build-test"
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

对应着 /gulpfile.babel.js 中定义的任务

猜你喜欢

转载自blog.csdn.net/my_csdn2018/article/details/80756376
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022