gulp 常用插件

合并文件

gulp-concat

安装 npm install gulp-concat --save-dev 或者 yarn add gulp-concat -D

import {src,dest}  = require('gulp');
import concat = require('gulp-concat');

function concatCss(){
	return src('./src/scss/**/*.css')
	    .pipe(concat('main.css'))
	    .pipe(dest('./dev/'))
}

exports.default = concatCss;

编译 sass 文件

gulp-sass

安装npm install node-sass gulp-sass --save-dev 或者 yarn add node-sass gulp-sass -D

使用 gulp-sass 的时候必须得依赖于 node-sass 所以必须得安装 node-sass.

安装 node-sass 包可能会遇到问题，请参考 : yarn 安装 node-sass 依赖报错

import {src,dest}  = require('gulp');
import sass = require('gulp-sass');
import concat = require('gulp-concat');

function compileScss() {
  return src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))  // 编译
    .pipe(concat('main.css'))   // 合并
    .pipe(dest('./dev/'))  
}

exports.default = compileScss;

可以指定编译输出格式

.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

开启静态服务

gulp-webserver

安装npm install gulp-webserver --save-dev 或者 yarn add gulp-webserver -D

import {src,dest}  = require('gulp');
import webserver = require('gulp-webserver');

function startServer() {
  return src('./dev/')
    .pipe(webserver({
      host: 'localhost',  // 主机或者ip
      port: '9090',  // 端口
      livereload: true,  // 是否自动重启
      open: true  // 是否自动打开
    }))
}

exports.default = startServer;

webpack-stream

Run webpack as a stream to conveniently integrate with gulp. （以流的形式运行webpack，方便地与gulp集成。）

安装 npm install webpack-stream --save-dev 或者 yarn add webpack-stream -D

const path = require('path');
const gulp = require('gulp');
const webpack = require('webpack-stream');

return gulp.src('src/entry.js')
    .pipe(webpack({
      mode: 'development', // 模式  development 是开发模式
      entry: './src/js/app.js',  // 入口文件
      output: { // 输出文件
        path: path.resolve(__dirname, './dev/'),  // 配置输出的文件路径
        filename: 'main.js'  // 输出的文件名
      }))
    .pipe(gulp.dest('dist/'));

ES5 以上版本转换成 ES5 代码

babel-loader 该软件包允许使用Babel和webpack转换JavaScript文件。

安装

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime --save-dev

或者

yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime -D

rules: [
  {
    test: /\.js$/,  // 正则，表示匹配 .js 结尾的文件
    exclude: /node_modules/,  // 过滤的文件
    use: {
      loader: 'babel-loader',  // 配置 loader
      options: {  
        presets: ['@babel/preset-env'],  // 预设
        plugins: ['@babel/plugin-transform-runtime']  // 运行时插件
      }
    }
  }
]

转化 JavaScript 的完整代码

const webpack = require('webpack-stream');
const path = require('path');

function compileJs() {
  return src('./src/js/**/*.js')
    .pipe(webpack({
      mode: 'development',
      entry: './src/js/app.js',
      output: {
        path: path.resolve(__dirname, './dev/'),
        filename: 'main.js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                plugins: ['@babel/plugin-transform-runtime']
              }
            }
          }
        ]
      }
    }))
    .pipe(dest('./dev/'))
}

html 转换成 string

string-loader 该插件可以把 html 转换成 string

安装 npm install string-loader --save-dev 或者 yarn add string-loader -D

// 在 gulpfile.js 文件中配置
loaders: [
	test: /\.html$/,
	loader: 'string-loader'
]

使用的时候在 js 里就可以直接导入 html 文件了

控制台打印