美文网首页前端开发那些事让前端飞Web前端之路
gulp压缩、合并静态资源了解一下?

gulp压缩、合并静态资源了解一下?

作者: 聪明的汤姆 | 来源:发表于2018-04-17 10:53 被阅读30次

    前言

    • gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化,而且在开发过程中能够通过配置自动完成很多重复的任务,让我们可以专注于代码,提高工作效率
    • gulp的用处当然不只用来压缩、合并文件,本文只是讲这两个用途
    • 官网文档

    安装

    在项目目录下
    npm install gulp --save

    模块

    一次性安装以上模块
    npm install gulp-uglify gulp-clean-css gulp-imagemin gulp-rename gulp-concat --save

    项目结构

    gulp入口文件必须命名为gulpfile.js


    dir.png

    代码

    压缩javascript文件
    var gulp = require('gulp'); // 引入gulp
    var uglify = require('gulp-uglify'); // 引入uglify模块
    var rename = require('gulp-rename'); // 引入rename模块
    
    // jscompress是任务名字,设置为default,启动gulp压缩的时候可以省去任务名
    gulp.task('jscompress', function () {
      return gulp.src(['./javascript/common.js', './javascript/index.js']) // 压缩common、index
        .pipe(uglify()) // 压缩js方法
        .pipe(rename({suffix: '.min'})) // 为所有压缩的js都加.min后缀
        .pipe(gulp.dest('./javascript')) // 输出的目录
    })
    

    命令行启动gulp的jscompress任务
    gulp jscompress

    javascripts.png

    可以看到最后会输出对应的min.js文件,以下是代码对比图

    contrast.png
    压缩css文件
    var clean = require('gulp-clean-css'); // 引入clean-css模块
    
    gulp.task('csscompress', function () {
      return gulp.src(['./stylesheets/common.css', './stylesheets/index.css']) // 压缩common、index
        .pipe(clean()) // 压缩css方法
        .pipe(rename({suffix: '.min'})) // 同js一样,加上.min后缀
        .pipe(gulp.dest('./stylesheets')) // 输出的文件夹
    })
    

    命令行启动gulp的csscompress任务
    gulp csscompress

    压缩image文件
    var imagemin = require('gulp-imagemin');
    
    gulp.task('imagecompress', function () {
    // 也可以这样写src('./images/*.*),表示压缩images目录下的所有文件,但你必须得放符合图片格式的文件
      return gulp.src(['./images/*.jpg', './images/*.png'])
        .pipe(imagemin()) // 压缩图片方法
        .pipe(gulp.dest('./images')) // 图片就不需要重命名啦,直接覆盖原来的
    })
    

    命令行启动gulp的imagecompress任务
    gulp imagecompress

    合并文件
    var concat = require('gulp-concat'); // 引入合并模块
    
    gulp.task('concatJs', function () {
      return gulp.src(['/javascripts/index.js', './javascripts/common.js']) // 需要合并的js集合,或者全部src('./javascripts/*.js')
        .pipe(concat('concat.js')) // 合并后的文件名字
        .pipe(gulp.dest('./javascript')) // 输出的文件夹
    })
    

    命令行启动gulp的concatJs任务
    gulp concatJs

    任务合并,执行那么多次命令很麻烦?
    gulp.task('default', ['jscompress', 'csscompress', 'imagecompress', 'concatJs']);
    

    命令行启动gulp中的所有任务
    gulp

    监听文件的改动自动执行压缩、合并等任务
    gulp.task('auto', function () {
      // 监听javascripts目录下的所有js文件,如果发生改动(当您ctrl+s),那么就会执行jscompress任务
      gulp.watch('./javascripts/*.js', ['jscompress']);
      gulp.watch('./stylesheets/*.css', ['csscompress']);
    })
    
    完整的gulpfile.js代码
    var gulp = require('gulp');
    var uglify = require('gulp-uglify');
    var clean = require('gulp-clean-css');
    var imagemin = require('gulp-imagemin');
    var rename = require('gulp-rename');
    var concat = require('gulp-concat');
    
    // 压缩js
    gulp.task('jscompress', function () {
      return gulp.src(['./javascripts/common.js', './javascripts/index.js'])
        .pipe(uglify())
        .pipe(rename({
          suffix: '.min'
        }))
        .pipe(gulp.dest('./javascripts'))
    })
    
    // 压缩css
    gulp.task('csscompress', function () {
      return gulp.src(['./stylesheets/common.css', './stylesheets/index.css'])
        .pipe(clean())
        .pipe(rename({
          suffix: '.min'
        }))
        .pipe(gulp.dest('./stylesheets'))
    })
    
    // 压缩image
    gulp.task('imagecompress', function () {
      return gulp.src(['./images/*.jpg', './images/*.png'])
        .pipe(imagemin())
        .pipe(gulp.dest('./images'))
    })
    
    // 合并js
    gulp.task('concatJs', function () {
      return gulp.src(['/javascripts/index.js', './javascripts/common.js'])
        .pipe(concat('concat.js'))
        .pipe(gulp.dest('./javascripts'))
    })
    
    // 监听js和css的改动
    gulp.task('auto', function () {
      gulp.watch('./javascripts/*.js', ['jscompress']);
      gulp.watch('./stylesheets/*.css', ['csscompress']);
    })
    
    // 默认任务
    gulp.task('default', ['jscompress', 'csscompress', 'imagecompress', 'concatJs']);
    
    如果您喜欢这篇文章,那么记得动动你们的👋,给个like或者关注我哦👍。

    相关文章

      网友评论

        本文标题:gulp压缩、合并静态资源了解一下?

        本文链接:https://www.haomeiwen.com/subject/uacukftx.html