gulp起步

`gulp`起步

前段时间专门看了下webpack打包的基本操作，想到之前谈到比较多的gulp，也是个打包工具，想了解下具体是怎么打包的。这真的是一个从零开始的起步教程

创建简单工程

首先创建一个新目录，命名为proj

mkdir proj
cd proj

新建我们需要的目录结构：

mkdir src
mkdir dist

具体应用结构如下：

proj/
   ├─ src/
   └─ dist/

初始化工程

把这个文件夹转换成npm包：

npm init

安装依赖项

npm install -g gulp-cli
npm install --save-dev gulp

添加内容

新建`/src/index.html`

<!DOCTYPE html>
<html lang="en">
<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>
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>
  <h3>Hi</h3>
  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>

添加`css`和`js`文件

proj/
└───src/
│   └───css
│       │   style.css
│   └───js
│       │   main.js

// style.css
* {
  display: block;
  width: 500px;
  height: 200px;
  color: rebeccapurple;
}

// main.js
function hello(compiler) {
  console.log('Hello from' + compiler);
}
hello("TypeScript");

安装打包所需依赖

{
  "name": "proj",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-inject": "^5.0.2",
    "gulp-mini-css": "0.0.3",
    "gulp-rename": "^1.4.0",
    "gulp-typescript": "^5.0.0",
    "gulp-uglify": "^3.0.1",
    "typescript": "^3.3.3"
  }
}

新建`gulpfile.js`

const gulp = require('gulp')
const mincss = require('gulp-mini-css')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const inject = require('gulp-inject')

const src_css = './src/css'
const dest_css = './dest/css'
const src_js = './src/js'
const dest_js = './dest/js'
const src_index = './src/index.html'
const dest_index = './dest'

gulp.task('styles', done=>{
  gulp.src(src_css + '/**/*.css')
      .pipe(mincss())
      .pipe(rename({
        prefix: 'css-', //打包后文件名前缀
        suffix: '.min', //打包后文件名后缀
        extname: '.css' //打包后文件扩展名
      }))
      .pipe(gulp.dest(dest_css))
  done()
})

gulp.task('script', done=>{
  gulp.src(src_js + '/**/*.js')
      .pipe(uglify().on('error', (err)=>{console.log(err)})) // uglify打印出错内容
      .pipe(rename({
        prefix: 'js-', //打包后文件名前缀
        suffix: '.min', //打包后文件名后缀
        extname: '.js' //打包后文件扩展名
      }))
      .pipe(gulp.dest(dest_js))
  done()
})

gulp.task('index', done=>{
  const sources = gulp.src(['./dest/**/*.js', './dest/**/*.css'])
  gulp.src(src_index)
      .pipe(inject(sources, {
        starttag: '', // 判断注入的位置
        endtag: ''
      }))
      .pipe(gulp.dest(dest_index))
  done()
})

gulp.task('default', gulp.series('styles', 'script', 'index'), done => {
  done()
})

打包

执行打包命令：

gulp

查看应用结构目录：

proj/
└───src/
│   └───css
│       │   style.css
│   └───js
│       │   main.js
└───dest/
│   └───css
│       │    css-style.min.css
│   └───js
│       │   js-main.min.js
└───node_modules/
│       │   ...
└───gulpfile.js
└───package.json

此时查看打包后的index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<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>
  <!-- inject:css -->
  <link rel="stylesheet" href="/dest/css/css-style.min.css">
  <!-- endinject -->
</head>
<body>
  <h3>Hi</h3>
  <!-- inject:js -->
  <script src="/dest/js/js-main.min.js"></script>
  <!-- endinject -->
</body>
</html>

神奇之处就是html文件中注入了我们的css和js文件。

后续

这里只是阐述了gulp的简单起步，具体应用还在在实际项目中慢慢探索。