项目打包之gulp 打包工具

我们在做项目的时候，往往一个项目将要上线的时候都涉及到项目打包，即使不是一个完整的项目。小型未完成的项目在上线的时候我们也可以进行打包，打包项目可以大大压缩我们的项目体积。

比如我们在写js和css代码的时候，为了美化好看，我们往往会进行缩进换行，一来好看，二来也是符合我们正常人的编程思维。项目打包就是把文件中多余的东西去掉，比如换行，空格之类的。大大压缩我们的代码体积，这是我们打包项目较大的意义之处了。

常见的打包工具有两种

• gulp打包工具
• webpack 打包工具

这里我们只介绍有关gulp工具相关和
使用方法，webpack 会在后面将要写的文章中进行单独一篇介绍。

1. gulp如何安装

能阅读到这里，相信你也知道什么npm , cnpm 了。(npm (node package manager)是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具)具体阅读这里 有关npm的知识

首先我们要安装一gulp的全局依赖 这里直接使用npm去安装，在命令行使用以下命令去安装

npm install -g gulp[@3.9.1]
或者使用
cnpm install gulp -g

中括号表示是安装什么版本的，其实有没有都行,没有版本号就默认安装最新版的gulp工具.
安装完成之后检验一下是否安装完成
命令行输入 npm --version 如果能输出版本号,就是安装成功了

2. 如何使用gulp

假如我们要在某个目录下使用gulp打包工具,比如我现在的项目目录是这个样子的

如果我们需要用gulp工具来管理这个项目文件夹及文件的话,我们首先要进行初始化:执行命令npm init -y

此时文件夹下多了个文件叫 package.json 这个文件用来存储一些项目的基本信息,比如作者,描述等等, 还有个重要的作用就是记录我们下载过的包 .总之这个文件在项目上线的时候非常重要.

执行完 npm init -y 之后还不能使用gulp进行打包构建项目, 要想在某个项目使用gulp工具,还是要在某个项目上再安装一次gulp的项目依赖. 因为每一个项目打包构建规则不一样,所以不能配置成一个,所以还要在在项目中进行一次gulp安装

执行命令:npm install -D gulp@3.9.1 这里的 -D 就是 -dev 的缩写,加上-D之后,就说明这个插件我只在开发的时候使用, 项目上线的时候我们是不用下载gulp打包工具的

举个例子

我安装jquery使用的命令是: npm i jquery 而安装gulp的命令是: npm install -D gulp@3.9.1 ,他们在package.json 记录的方式就不一样,jquery在项目上线的时候,上传到服务器之后,执行npm install 会重新下载jquery,而不会下载gulp,顾名思义, devDependencies ,开发时依赖.

---

执行完 npm install -D gulp@3.9.1 之后,我们还需要新建一个文件,叫做 gulpfile.js ,这个文件就是用来配置gulp打包构建的规则的,就是里面写一些规则,告诉gulp,我要怎样打包我的项目

3. 如何打包项目

首先编写规则

/* gulp是一个基于任务的工具,也就是说gulp规定,不管做什么功能,都用统一的接口管理
必然去注册一个任务,然后执行任务
gulp的特点:任务化 */
// gulp的每个功能都是一个任务，压缩css的任务、合并文件的任务。。。
// gulp规定任务要写在一个叫做glupfile.js的文件中，在这个文件中用来配置所有任务。
// gulp和node中的其他模块一样,使用的时候需要导入
const gulp = require('gulp')
function fn(cb) {
  console.log(gulp);
  cb()
}
exports.default = fn

这里就是 我假设fn函数就是我项目的规则,我把这个fn函数,也就是这个任务做了一个默认导出,那么我在控制台直接输入gulp 就可以执行这个文件

这里就直接执行了这个函数,[也就是这个任务],其实也可以简单理解是,我们就是执行一个有多功能特殊功能的函数.

可能出现的问题,打包不成功

很有可能是版本问题,建议卸载当前版本,里外都安装最新版.执行命令npm uninstall再执行安装命令npm install gulp -dev就行!

接下来我们就进行打包文件

我们打印一下导入的gulp包
我们会发现几个重要的方法

• scr():创建一个流，用于从文件系统读取 Vinyl 对象。(Vinyl 是描述文件的元数据对象。Vinyl 实例的主要属性是文件系统中文件核心的 path 和 contents 核心方面。Vinyl 对象可用于描述来自多个源的文件（本地文件系统或任何远程存储选项上）),相当于读文件
• dest() 创建一个用于将 Vinyl 对象写入到文件系统的流 ,相当于写文件
• series() 将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行.,在导出的时候,规定任务执行是同步的,上一个执行完,才会执行下一个
• parallel() 将任务功能和/或组合操作组合成同时执行的较大操作, 在导出的时候,规定任务执行是异步的,任务同时执行

认识这些我们就可以进行简单的操作了

尝试一下打包css文件,首先我们还要依赖别的插件进行打包.下面是常用的插件

gulp-cssmin -->打包css文件的
gulp-autoprefixer -->给css加前缀
gulp-sass -->打包sass文件变成css
gulp-uglify -->丑化js,也就是压缩js文件
gulp-babel+babel-core+babel-preset-es2015 -->将es6 转化为es5
gulp-htmlmin --> 压缩html文件
gulp-clean --> 删除文件和文件夹
gulp-webserver -->流式gulp插件可通过LiveReload运行本地Web服务器

代码如下:

const {
  gulp,
  src,
  pipe,
  watch
} = require('gulp')
const cssmin = require('gulp-cssmin')

function packageCss(cb) {
  // 先读取文件,先要用到src()方法,我们需要从gulp包中解构出来
  src('./src/css/*.css') // 对哪些文件进行操作
    .pipe(cssmin()) // 都做什么，这里做的就是进行 css 压缩
    .pipe(dest('./dist/css')) // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹  
}
// exports.packageCss = packageCss
// 这种是默认导出,在执行gulp命令的时候就不再需要 gulp packageCss 直接gulp就能 打包
exports.default = packageCss

可以看到我们的文件就被打包过去了,而且被压缩了
原来的文件内容

打包后的文件内容

又例如我们想在打包的时候,给一些不兼容的样式加上前缀兼容,
要在package.json文件加上一行代码

function packageCss(cb) {
  // 先读取文件,先要用到src()方法,我们需要从gulp包中解构出来
  src('./src/css/*.css') // 对哪些文件进行操作
    .pipe(autoPrefixer()) // 都做什么，这里做的就是进行 css 压缩
    .pipe(cssmin())
    .pipe(dest('./dist/css')) // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹  
    cb()
}

打包之后

其他操作都是基本一样的.比如打包sass,打包js,打包html,打包

const {
  src,
  dest,
  pipe,
  watch
} = require('gulp')

const cssmin = require('gulp-cssmin')
// 2-1. 引入 gulp-autoprefixer 
const autoPrefixer = require('gulp-autoprefixer')
const rename = require('gulp-rename')
const clean = require('gulp-clean')
function packageCss(cb) {

  src("./dist/css",{allowEmpty:true})//这里的意思就是清空dist/css这个目录
  .pipe(clean())
  // 先读取文件,先要用到src()方法,我们需要从gulp包中解构出来
  src('./src/css/*.css',) // 对哪些文件进行操作
    .pipe(autoPrefixer()) // 都做什么，这里做的就是进行 css 压缩3
    .pipe(rename(
      {
        // dirname: '', // 文件路径
        // basename: '', // 文件名
        // prefix: 'prefix.', // 文件名前缀
        suffix: '.xmin', // 文件名后缀
        // extname: '.css', // 文件扩展名
      }
    ))
    .pipe(cssmin())
    .pipe(dest('./dist/css')) // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹  
    cb()
}
// exports.packageCss = packageCss
// 这种是默认导出,在执行gulp命令的时候就不再需要 gulp packageCss 直接gulp就能 打包
exports.default = packageCss

,还有的就是,我们可以监视,进行全自动打包项目下面写一个全自动打包项目的.

/* gulp是一个基于任务的工具,也就是说gulp规定,不管做什么功能,都用统一的接口管理
必然去注册一个任务,然后执行任务
gulp的特点:任务化 */

// gulp的每个功能都是一个任务，压缩css的任务、合并文件的任务。。。
// gulp规定任务要写在一个叫做glupfile.js的文件中，在这个文件中用来配置所有任务。

// gulp和node中的其他模块一样,使用的时候需要导入

const {
  src,
  dest,
  pipe,
  watch,
  parallel,
  series
} = require('gulp')

const cssmin = require('gulp-cssmin')
const autoPrefixer = require('gulp-autoprefixer')
const rename = require('gulp-rename')
const clean = require('gulp-clean')
const sass = require('gulp-sass')
const ugly = require('gulp-uglify')
const babel = require('gulp-babel')
const htmlmin =require('gulp-htmlmin')
const connect = require('gulp-connect')
const open = require('open')


function packageCss(cb) {
  src("./dist/css",{allowEmpty:true})//这里的意思就是清空dist/css这个目录
  .pipe(clean())
  // 先读取文件,先要用到src()方法,我们需要从gulp包中解构出来
  src('./src/css/*.css',) // 对哪些文件进行操作
  .pipe(autoPrefixer()) // 给不兼容的样式加前缀
  .pipe(rename(
    {
      suffix: '.min', // 文件名后缀
    }
  ))
  .pipe(cssmin())//进行压缩
  .pipe(dest('./dist/css')) // 把压缩完毕的文件放在 dist 文件夹下的 css 文件夹  
  cb()
}


function packageJs(cb) {
  src('./src/js/*.js')
  .pipe(
    babel({
      presets: ['es2015']
  }))
  .pipe(ugly())
  .pipe(rename({
     suffix:'.min'
    })) 
  .pipe(dest('./dist/js'))
  cb()
}

function packageHtml(cb){
  src('./src/html/*.html')
  .pipe(htmlmin({
      collapseWhitespace:true
  }))
  .pipe(dest('./dist/html'))
  .pipe(connect.reload()) // 执行完当前任务浏览器会自动刷新
  cb()
}


function server(cb){
    // 创建服务器
    connect.server({
        root:'./dist/html',
        port:5000,
        livereload:true
    })
    // 监视任务
    // 参数1：被监视的文件，参数2：要执行的任务
    watch('./src/html/*.html',{ignoreInitial:false},packageHtml)
    watch('./src/css/*.css',{ignoreInitial:false},packageCss)
    watch('./src/js/*.js',{ignoreInitial:false},packageJs)
    // 自动打开浏览器
    // 因为任务执行特别快，但是文件生成是需要一定的时间的，所以，会造成，立马打开浏览器找不到文件的一个问题，解决，延迟打开浏览器
    setTimeout(function(){
        open('http://127.0.0.1:5000/index.html')
    },3000)
    
    cb()
}
exports.default = server

这篇gulp也算是硬着头皮搞了,请教了很多次老师才成功,如果发现有错漏的请指出,谢谢

相信, 明天会更好的