Gulp自动化构建工作流及其具体实例

最新推荐文章于 2020-07-04 14:46:00 发布
最新推荐文章于 2020-07-04 14:46:00 发布
阅读量217 收藏 1
点赞数
分类专栏： 自动化构建 文章标签： gulp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42499553/article/details/106797146
版权

Gulp的基本使用

1.创建一个新的package.json的文件

yarn init

2.安装gulp模块

yarn add gulp --dev

3.在文件根目录创建一个gulpfile.js的文件作为gulp的入口文件
4.gulp4.0版本以后以导出成员的方式定义任务，在最新的gulp版本中取消了同步代码模式全部采用异步代码模式，任务完成之后要以回调函数的方式对任务结束进行标记

exports.foo = done => {
    // 传入的done作为回调函数标识任务完成
    console.log('foo task working')
    done() // 标识任务完成
}

默认任务不需要在yarn gulp后添加任务名称可以默认运行

exports.default = done => {
    console.log('default task working')
    done()
}

Gulp创建组合任务

1.未被导出的成员任务可以理解成私有的任务，gulp并不能直接运行他们但是可以用series和parallel这两个api使他们变成组合任务其中series是串行的任务结构（依次执行）parallel是并行的任务结构

const { series, parallel } = require('gulp')

const task1 = done => {
    setTimeout( () => {
        console.log('task1 working')
        done()
    }, 1000)
}

const task2 = done => {
    setTimeout( () => {
        console.log('task2 working')
        done()
    }, 1000)
}

const task3 = done => {
    setTimeout( () => {
        console.log('task3 working')
        done()
    }, 1000)
}

exports.foo = series(task1, task2, task3) // 传入任务名称可以依次执行
exports.bar = parallel(task1, task2, task3) // 传入任务可以同时执行

Gulp的异步任务

1.以回调函数的形式标识异步任务已完成，回调和node.js一样是错误优先的模式，在回调函数里传入错误信息运行时控制台会报出错误结束后续所有任务执行

exports.callback = done => {
    console.log(`callback working`)
    done()
}

exports.callback_error = done => {
    console.log(`callback error`)
    done(new Error(`task failed!`))
}

2.promise方式

exports.promise = done => {
    console.log(`promise task`)
    //一旦我们返回了Promise.resolve就标记任务结束了
    //在里面我们不需要传任何值，因为gulp会忽略掉
    return Promise.resolve()
}
exports.promise_error = done => {
    console.log(`promise error task`)
    // reject返回错误信息同样会结束后续所有任务的执行
    return Promise.reject(new Error(`promise failed`))
}

3.async…awit方式，其实async…await就是promise的语法糖

const timeout = time => {
    return new Promise(resolve => {
        setTimeout(resolve,time)
    })
}

exports.async = async() => {
    await timeout(1000)
    console.log(`async task`)
}

4.通过stream的方式（最常用到的方式）因为构建一般都是对文件进行处理，需要引入fs模块

const fs = require('fs')
exports.stream = () => {
    // 通过fs创建一个读取文件流 readStream此时就是一个文件流对象
    const readStream = fs.createReadStream('package.json')
    // 通过fs创建一个写入文件流
    const writeStream = fs.createWriteStream('temp.txt')
    //通过pipe方法可以将读取的文件流导入到你要写入的文件流
    // 可以理解为从一个池子向另一个池子倒水 起到文件复制的作用
    readStream.pipe(writeStream)
    // 在stream文件流中在读取完毕后会有一个end事件这个end事件标识任务的结束
    return readStream
}

Gulp构建过程核心工作原理

  • 读取流：把需要转换的文件读出来（src方法）
  • 转换流：通过转换流的转换逻辑转换成我们想要的结果（插件方法）
  • 写入流：通过写入流写入到指定的文件位置（dest方法）

Gulp文件操作API

简单的用压缩css代码作为例子举例
压缩css转换流通过安装模块 gulp-clean-css实现，文件扩展名变更通过gulp-rename实现

const { series, parallel, src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')
exports.default = () => {
    // 通过src读取这个路径中的文件
    // *通配符可以取到所有的这个目录下的文件
    return src('src/*.css')
    //通过pipe导入到转换流中
        .pipe(cleanCss())
    // 可以通过连续的pipe进行不同的转换rename改变文件后缀名
        .pipe(rename({
            extname:'.min.css'
        }))
    //通过pipe导入到dest的写入流dist目录
        .pipe(dest('dist'))
}

Gulp自动化构建例子–样式编译

首先先创建一个需要编译的目录工程结构
在这里插入图片描述

const { src, dest } = require('gulp')
// 转换流插件 吧sass转化成css
const sass = require('gulp-sass')

const style = () => {
  // base是转换的基准路径在转换时会把src后面的路径都保留下来
  return src('src/assets/styles/*.scss', { base: 'src'})
  // 转换流把sass转化成css
  // 在转化过程中这个模块会默认带下划线开头的scss文件依赖于不带下划线开头的scss就不会被编译
  // 在里面传入一个outputStyle属性就可以把编译的文件输出成完全展开的形式
  .pipe(sass({ outputStyle:'expanded'}))
  .pipe(dest('dist'))
}

module.exports = {
  style
}

Gulp例子–脚本编译

const { src, dest } = require('gulp')
// 转换流插件 把es6 转化成es5
const babel = require('gulp-babel')

//脚本编译
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src'})
  // 通过babel中选项使用presets指定babel要转换的特性，用preset-env转换所有es6特性
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

Gulp例子 – 页面模板编译

同时根据parallel任务并行执行样式，脚本，页面三个任务

const { src, dest, parallel } = require('gulp')
// 转换流插件 吧sass转化成css
const sass = require('gulp-sass')
// 转换流插件 把es6 转化成es5
const babel = require('gulp-babel')
// 转换流插件 把模板文件转换
const swig = require('gulp-swig')


//样式编译
const style = () => {
  // base是转换的基准路径在转换时会把src后面的路径都保留下来
  return src('src/assets/styles/*.scss', { base: 'src'})
  // 转换流把sass转化成css
  // 在转化过程中这个模块会默认带下划线开头的scss文件依赖于不带下划线开头的scss就不会被编译
  // 在里面传入一个outputStyle属性就可以把编译的文件输出成完全展开的形式
  .pipe(sass({ outputStyle:'expanded'}))
  .pipe(dest('dist'))
}

//脚本编译
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src'})
  // 通过babel中选项使用presets指定babel要转换的特性，用preset-env转换所有es6特性
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

//页面编译
const page = () => {
  // src/**/*.html 这个通配符的含义是寻找src目录下任意子文件夹下包含.html的文件
  return src('src/*.html', { base:'src' })
    .pipe(swig())
    .pipe(dest('dist'))
}
// 编译任务
// 通过parallel并行编译这三个任务
const compile = parallel(style, script, page)

module.exports = {
  compile
}

Gulp例子 – 图片和字体文件的转换

// 转换流插件 把图片压缩
const imagemin = require('gulp-imagemin')
// 图片转换
const image = () => {
  // **通配符标识这个文件夹下所有的文件
  return src('src/assets/images/**' , { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

// 字体文件拷贝以及讲一些svg格式压缩
const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
  // 不存在图片类型的文件imagemin就会跳过
    .pipe(imagemin())
    .pipe(dest('dist'))
}

Gulp例子 – 其他文件及文件清除

整合前面的代码形成一小部分完整工程编译

const { src, dest, parallel, series } = require('gulp')
// 转换流插件 吧sass转化成css
const sass = require('gulp-sass')
// 转换流插件 把es6 转化成es5
const babel = require('gulp-babel')
// 转换流插件 把模板文件转换
const swig = require('gulp-swig')
// 转换流插件 把图片压缩
const imagemin = require('gulp-imagemin')
// 小插件del 可以清除dist中的文件
const del = require('del')


const clean = () => {
  // 里面是一个数组清除指定文件的内容
  // 他是一个promise内容
  return del(['dist'])
}

//样式编译
const style = () => {
  // base是转换的基准路径在转换时会把src后面的路径都保留下来
  return src('src/assets/styles/*.scss', { base: 'src'})
  // 转换流把sass转化成css
  // 在转化过程中这个模块会默认带下划线开头的scss文件依赖于不带下划线开头的scss就不会被编译
  // 在里面传入一个outputStyle属性就可以把编译的文件输出成完全展开的形式
  .pipe(sass({ outputStyle:'expanded'}))
  .pipe(dest('dist'))
}

//脚本编译
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src'})
  // 通过babel中选项使用presets指定babel要转换的特性，用preset-env转换所有es6特性
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

//页面编译
const page = () => {
  // src/**/*.html 这个通配符的含义是寻找src目录下任意子文件夹下包含.html的文件
  return src('src/*.html', { base:'src' })
    .pipe(swig())
    .pipe(dest('dist'))
}

// 图片转换
const image = () => {
  // **通配符标识这个文件夹下所有的文件
  return src('src/assets/images/**' , { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

// 字体文件拷贝以及讲一些svg格式压缩
const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
  // 不存在图片类型的文件imagemin就会跳过
    .pipe(imagemin())
    .pipe(dest('dist'))
}

//额外文件处理 简单拷贝过去
const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

// 编译任务
// 通过parallel并行编译这三个任务
const compile = parallel(style, script, page, image, font)
// 需要进行同步任务 先删除再编译
const build = series(clean, parallel(compile, extra))

module.exports = {
  compile,
  build
}

Gulp例子 – 自动加载插件

如果使用过多的插件就会导致页面出现很多的require，对于这种问题可以使用一个小插件gulp-load-plugins实现解决

const loadPlugins = require('gulp-load-plugins')
// 自动获取所有gulp里面的插件，下面所有运用插件转换流的都变为plugins.插件名
const plugins = loadPlugins()

自动加载所有插件后的gulp代码

const { src, dest, parallel, series } = require('gulp')
// 所有插件自动加载插件
const loadPlugins = require('gulp-load-plugins')
// 自动获取所有gulp里面的插件，下面所有运用插件转换流的都变为plugins.插件名
const plugins = loadPlugins()
// 小插件del 可以清除dist中的文件
const del = require('del')


const clean = () => {
  // 里面是一个数组清除指定文件的内容
  // 他是一个promise内容
  return del(['dist'])
}

//样式编译
const style = () => {
  // base是转换的基准路径在转换时会把src后面的路径都保留下来
  return src('src/assets/styles/*.scss', { base: 'src'})
  // 转换流把sass转化成css
  // 在转化过程中这个模块会默认带下划线开头的scss文件依赖于不带下划线开头的scss就不会被编译
  // 在里面传入一个outputStyle属性就可以把编译的文件输出成完全展开的形式
  .pipe(plugins.sass({ outputStyle:'expanded'}))
  .pipe(dest('dist'))
}

//脚本编译
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src'})
  // 通过babel中选项使用presets指定babel要转换的特性，用preset-env转换所有es6特性
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}

//页面编译
const page = () => {
  // src/**/*.html 这个通配符的含义是寻找src目录下任意子文件夹下包含.html的文件
  return src('src/*.html', { base:'src' })
    .pipe(plugins.swig())
    .pipe(dest('dist'))
}

// 图片转换
const image = () => {
  // **通配符标识这个文件夹下所有的文件
  return src('src/assets/images/**' , { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

// 字体文件拷贝以及讲一些svg格式压缩
const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
  // 不存在图片类型的文件imagemin就会跳过
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

//额外文件处理 简单拷贝过去
const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

// 编译任务
// 通过parallel并行编译这三个任务
const compile = parallel(style, script, page, image, font)
// 需要进行同步任务 先删除再编译
const build = series(clean, parallel(compile, extra))

module.exports = {
  compile,
  build
}

Gulp例子 – 热更新开发服务器

安装browser-sync模块，这个模块提供给我们一个开发服务器，它支持我们再代码变化后热更新到浏览器，可以及时看到页面效果。它并不是一个gulp的插件，我们只是用gulp去管理

// 引用browserSync模块
const browserSync = require('browser-sync')
// browserSync的create方法用于创建一个开发服务器
const bs = browserSync.create()
// 开发服务器任务
const serve = () => {
  bs.init({
    // notify可以让web服务器启动时右上角的提示关闭
    notify: false,
    // port用于指定启动服务的端口号
    port: 2080,
    // open属性用于选择是否再启动服务后自行启动服务器
    // open: false,
    // files指定一个字符串 这里面是让browser监听哪个文件变化之后热更新
    files: 'dist/**',
    // server用于指定将哪个目录作为网站的根目录
    server: {
      // 浏览器运行的是加工过的dist文件
      baseDir: 'dist',
      // routes可以让打包文件中指向不在dist中的node——modules文件的资源，
      //让他们映射到项目根目录下的node_modules从而可以获取
      routes: {
        '/node_modules' : '/node_modules'
      }
    }
  })
}

Gulp例子 – 监视变化以及构建优化

// watch监视某一个文件的通配符判断是不是要重新执行某一个任务
const { src, dest, parallel, series, watch } = require('gulp')
// 开发服务器任务
const serve = () => {

  // watch传入两个参数 一个是监听的文件 第二个是监听后重新执行的任务
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
  // 这三中对图片文字等进行修改后可以重新执行bs任务找到源码中的图片等进行热更新
  watch([
    'src/assets/styles/*.scss',
    'src/assets/scripts/*.js',
    'src/*.html'
  ], bs.reload)

  bs.init({
    // notify可以让web服务器启动时右上角的提示关闭
    notify: false,
    // port用于指定启动服务的端口号
    port: 2080,
    // open属性用于选择是否再启动服务后自行启动服务器
    // open: false,
    // files指定一个字符串 这里面是让browser监听哪个文件变化之后热更新
    files: 'dist/**',
    // server用于指定将哪个目录作为网站的根目录
    server: {
      // 浏览器运行的是加工过的dist文件,数组后面可以寻找其他的文件
      // js css html的编译需要dist编译后的而图片字体等不需要监听他只是一个复制和压缩的作用 对于开发毫无影响
      baseDir: ['dist', 'src', 'public'],
      // routes可以让打包文件中指向不在dist中的node——modules文件的资源，
      //让他们映射到项目根目录下的node_modules从而可以获取
      routes: {
        '/node_modules' : '/node_modules'
      }
    }
  })
}

// 编译任务
// 通过parallel并行编译这三个任务
const compile = parallel(style, script, page)
// 需要进行同步任务 先删除再编译
// build加入图片字体压缩任务 可以理解为在上线之前只编译一次
const build = series(clean, parallel(compile, extra, image, font))

// 开发任务 先编译后面进行服务器热修改开发,在开发阶段字体图片压缩等不需要执行,对构建过程进行了优化
const develop = series(compile, serve)

Gulp例子 – useref文件引用处理及文件压缩

在构建的过程中，在构建完的html里面会引用一些node_modules的文件但是在打包过程中我们不会将其打包在dist文件下，在开发模式中我们可以用路由映射的方式可是在真实线上我们就需要用useref插件进行处理。
文件压缩所需要的几个插件
gulp-htmlmin 压缩html文件
gulp-uglify 压缩js文件
gulp-clean-css 压缩css文件
分别压缩三个文件时需要进行判断 使用插件gulp-if

const useref = () => {
  //需要处理的文件是dist下的html 而不是src下的 src下的只是模板
  return src('dist/*.html', { base: 'dist' })
    //useref传入参数searchPath寻找要引用的文件 css文件都在dist中 node_modules文件都在根目录中
    .pipe(plugins.useref({ searchPath:['dist', '.'] }))
    // 分别压缩html css js文件 ,正则判断路径是否以js结尾
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    // 这个参数时折叠掉所有的空白字符,其余两个时压缩html中的css和js
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({ 
      collapseWhitespace:true,
      minifyCss,
      minifyJs
     })))
    //将他们导出到写入文件流 把找到要引用的文件全部合并到一个文件中vender.css
    .pipe(dest('release'))
}

Gulp案例 – 重新规划构建过程

因为使用了useref所以我们打破了构建的过程因为我们不能读和写都在同一个文件dist中进行迫不得已将他们重新写入了release文件中，但是我们想要最后上线的release中却没有压缩的图片所以需要重新规划构建过程。所以整个的规划构建过程需要将js css html这些需要二次useref加工的文件放入到一个临时文件temp中
在重新规划完构建过程之后，整个gulp自动化构建就全部完成了。完整代码如下所示

// watch监视某一个文件的通配符判断是不是要重新执行某一个任务
const { src, dest, parallel, series, watch } = require('gulp')
// 所有插件自动加载插件
const loadPlugins = require('gulp-load-plugins')
// 引用browserSync模块
const browserSync = require('browser-sync')
// 自动获取所有gulp里面的插件，下面所有运用插件转换流的都变为plugins.插件名
const plugins = loadPlugins()
// 小插件del 可以清除dist中的文件
const del = require('del')

// browserSync的create方法用于创建一个开发服务器
const bs = browserSync.create()

const clean = () => {
  // 里面是一个数组清除指定文件的内容
  // 他是一个promise内容
  // 清除 dist文件以及临时temp文件
  return del(['dist', 'temp'])
}

//样式编译
const style = () => {
  // base是转换的基准路径在转换时会把src后面的路径都保留下来
  return src('src/assets/styles/*.scss', { base: 'src'})
  // 转换流把sass转化成css
  // 在转化过程中这个模块会默认带下划线开头的scss文件依赖于不带下划线开头的scss就不会被编译
  // 在里面传入一个outputStyle属性就可以把编译的文件输出成完全展开的形式
  .pipe(plugins.sass({ outputStyle:'expanded'}))
  .pipe(dest('temp'))
}

//脚本编译
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src'})
  // 通过babel中选项使用presets指定babel要转换的特性，用preset-env转换所有es6特性
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
}

//页面编译
const page = () => {
  // src/**/*.html 这个通配符的含义是寻找src目录下任意子文件夹下包含.html的文件
  return src('src/*.html', { base:'src' })
    .pipe(plugins.swig())
    .pipe(dest('temp'))
}

// 图片转换
const image = () => {
  // **通配符标识这个文件夹下所有的文件
  return src('src/assets/images/**' , { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

// 字体文件拷贝以及讲一些svg格式压缩
const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
  // 不存在图片类型的文件imagemin就会跳过
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

//额外文件处理 简单拷贝过去
const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

// 开发服务器任务
const serve = () => {

  // watch传入两个参数 一个是监听的文件 第二个是监听后重新执行的任务
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
  // 这三中对图片文字等进行修改后可以重新执行bs任务找到源码中的图片等进行热更新
  watch([
    'src/assets/styles/*.scss',
    'src/assets/scripts/*.js',
    'src/*.html'
  ], bs.reload)

  bs.init({
    // notify可以让web服务器启动时右上角的提示关闭
    notify: false,
    // port用于指定启动服务的端口号
    port: 2080,
    // open属性用于选择是否再启动服务后自行启动服务器
    // open: false,
    // files指定一个字符串 这里面是让browser监听哪个文件变化之后热更新
    files: 'dist/**',
    // server用于指定将哪个目录作为网站的根目录
    server: {
      // 浏览器运行的是加工过的dist文件,数组后面可以寻找其他的文件
      // js css html的编译需要dist编译后的而图片字体等不需要监听他只是一个复制和压缩的作用 对于开发毫无影响
      // 重新规划构建后 js css html是从临时文件temp中取的
      baseDir: ['temp', 'src', 'public'],
      // routes可以让打包文件中指向不在dist中的node——modules文件的资源，
      //让他们映射到项目根目录下的node_modules从而可以获取
      routes: {
        '/node_modules' : '/node_modules'
      }
    }
  })
}
//useref文件引用处理
const useref = () => {
	//需要处理的文件是dist下的html 而不是src下的 src下的只是模板
	// 重新规划构建后 需要处理的文件在临时文件temp中
  return src('temp/*.html', { base: 'temp' })
	//useref传入参数searchPath寻找要引用的文件 css文件都在dist中 node_modules文件都在根目录中
    .pipe(plugins.useref({ searchPath:['temp', '.'] }))
    // 分别压缩html css js文件 ,正则判断路径是否以js结尾
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    // 这个参数时折叠掉所有的空白字符,其余两个时压缩html中的css和js
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({ 
      collapseWhitespace:true,
      minifyCss: true,
      minifyJs: true,
     })))
    //将他们导出到写入文件流 把找到要引用的文件全部合并到一个文件中vender.css
    .pipe(dest('dist'))
}

// 编译任务
// 通过parallel并行编译这三个任务
const compile = parallel(style, script, page)
// 需要进行同步任务 先删除再编译
// build加入图片字体压缩任务 可以理解为在上线之前只编译一次
// 在重新规划构建后 compile和useref是有依赖关系的所以他俩需要串行
const build = series(
  clean,
  parallel(
    series(
      compile,
      useref
    ),
    extra, 
    image, 
    font
  )
)

// 开发任务 先编译后面进行服务器热修改开发,在开发阶段字体图片压缩等不需要执行,对构建过程进行了优化
const develop = series(compile, serve)

module.exports = {
  clean,
  build,
  develop,
}

最后Gulp补充

在最后抛出的任务可以在package.json的scripts中指定运行的名称供大家快速理解使用，再次运行这些构建工作时就不需要再使用yarn gulp 。。。 了
直接可以使用 yarn build / yarn develp 等完成构建。

"scripts": {
    "clean": "gulp clean",
    "build": "gulp build",
    "develop": "gulp develop"
  },

最后不要忘记在.gitignore中忽略掉生成的dist和temp文件

好好学习用力吃饭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gulp-zip、gulp-task-listing、yargs 插件gulp项目案例实战练习
小青蛙的博客
05-18 1186
导读 在工作开发中经常需要压缩工具，进行对自定文件进行自动压缩打包，所以我们用到gulp-zip这个插件 有时候在gulp工作流定义太多的时候，需要随时查看task的数量和状态，所以我这个时候就可以用到gulp-task-listing，不过使用命令行gulp --tasks也可以做到 在处理一些生产环境 ( dev )或者线上环境 ( prod ）需要单独打包编译的情况下，我们就需要对命令行进...
gulp及gulpfile.js编写示例
Xhiu_huang的博客
08-20 6120
本文主要记录一个gulpfile.js示例，以免以后用的时候遗忘。但首先还是要了解gulp是什么以及如何使用。 一、什么是gulp 简单来说：就是压缩前端代码，实现浏览器自动刷新的工具。 完整地说：gulp是一个前端的自动化构建工具，是基于Node.js的自动化任务运行期，能自动化完成javascript/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化...
gulp的使用(三)之把gulp运用到项目实战中
LQB0210的博客
10-21 194
在了解了上面的gulp(一)(二)以后,我们就可以开始在项目中具体使用了,具体使用流程如下: 1. 创建一个project文件夹,然后里面首先创建一个src文件夹,里面放置开发要用到的文件夹: 2. 在project下打开git命令窗口(也可以windows自带的命令行): 3.输入命令: npm install -g gulp --registry=...
gulp自动化构建工作流——项目实例
Sophie_U的博客
01-10 751
gulp自动化构建工作流——项目常用配置 写在最前 在项目中，除了使用Mvvm框架开发一个完整的app外，往往还有在原生app内部嵌入多个灵散H5页面的需求。 在MVVM框架中，因为有vue-cli来实现项目结构的搭建，其中搭配webpack进行了开发的自动化构建配置，使开发过程中能过专注于业务逻辑，而不用多去考虑代码压缩，图片压缩，及替换等。 对于灵散的H
2-1-8-Gulp自动化构建案例
丁晓东go
06-24 120
useref 文件引用及压缩处理 在html中有时会引入一些css 或者js 文件，这些文件当我们打包完成之后就会出现文件路径不对应的情况。 针对这个问题可以使用一个 useref 的插件，使用这个插件可以自动地处理html中的构建注释。 按照这些构建注释，useref 可以帮我们将文件打包到指定的目录中，并且在这个过程中还可以对文件进行压缩等操作。 yarn add gulp-useref --dev const useref = () => { return src('dist/*.ht
Gulp, Gulp构建前端自动化工作流（Gulp入门介绍）.zip
09-16
Gulp是前端开发中一款非常流行的自动化构建工具，它的出现极大地提升了前端开发的效率，减少了手动执行重复任务的时间。Gulp基于Node.js平台，利用流(stream)处理文件，使得文件读写更为高效。本篇文章将深入探讨...
gulp4.0.2 前端构建脚手架
10-31
`gulp` 是一个流行的JavaScript任务运行器，用于自动化前端开发过程，如编译Sass、压缩JavaScript、合并CSS、图像优化等。版本4.0.2是其一个重要版本，带来了更稳定和高效的性能。在前端开发中，构建脚手架扮演着...
Gulp-Build-Example:使用 gulp 构建的项目示例
06-13
**Gulp：构建自动化工具** Gulp 是一个基于 Node.js 的任务自动化工具，它通过流式处理文件系统操作，如编译、压缩、合并代码，优化图片，甚至自动刷新浏览器等，极大地提高了前端开发的工作效率。Gulp 使用一种...
GulpAngularProject:使用gulp构建的angular项目
05-18
在这个项目中，我们可以通过Gulp自动化地处理Angular应用的各种资源文件。 **Gulp** 是一个基于流的构建系统，它的核心理念是通过流来处理文件，这使得它相比其他构建工具如Grunt更加高效。Gulp的工作方式是定义一...
gulp-poc：自动提款机的概念
02-14
总结，`gulp-poc` 可能是针对 Gulp 构建流程的一个实例展示，通过它我们可以学习如何利用 Gulp 实现自动化构建，提高工作效率，减少手动重复操作。理解 Gulp 的核心概念和插件机制，对于任何前端开发者来说都是至关...
gulp打包项目案例代码
02-21
此项目为一个简单的gulp打包项目，可供刚入门同学学习使用。使用到了nodejs、sass、gulp等基础知识，
通过gulp构建纯htmlcssjs工程并对测试版本和发行版本进行优化处理控制
08-12
通过gulp构建纯html、css、js工程，并对测试版本和发行版本进行优化处理控制，开发过程中环境依赖有nodejs、npm等
gulp工作流
hahahahahahahaha__1的博客
06-09 250
1.创建一个gulp文件夹。2.在该文件夹中npm init 生成一个package.json文件。3.在该文件夹下 npm install gulp --save-dev,安装一个gulp包.4.新建一个gulpfile.js文件作为主文件，在该文件中编写任务。此时的目录结构：5.在gulpfile.js中注册我们的任务：<1>less文件的编译，压缩：执行后的目录结构:styles...
使用gulp构建自动化工作流
weixin_40553958的博客
04-08 125
使用gulp构建自动化工作流 Gulp就一种可以自动化完成我们开发过程中大量的重复工作，提高效率的构建工具。 预处理语言的编译 js css html 压缩混淆 图片体积优化 下载nodejs安装包 去nodejs官网下载软件https://nodejs.org 配置npm的全局路径 Windows下的Nodejs npm路径是appdata，可能不是我们想要的路径，可以改成我...
gulp 构建 demo
xin_yun_Jian的博客
07-04 152
安装包 1. cnpm install gulp-concat gulp-uglify gulp-rename gulp-clean-css gulp-htmlmin-S 2. cnpm installgulp-livereload gulp-connect -S 代码目录结构 gulpfile.js var gulp = require('gulp'); var c...
【gulp.js】中大型项目构建发布实例
学知不足，业精于勤。
06-28 1431
Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于Node.js 构建的，利用Node.js 流的威力，你可以快速构建项目。 一、项目简介本文针对中大型cms项目（项目文件超过1.2G，静态资源类大小800MB）进行测试gulp.js的相关能力，结果如下：gulp简单易用，但在处理大量文件是性能消耗明显，cpu比较稳定，内存消耗较小无明显波
gulp 菜鸟实例分析
php小松
06-25 908
之前一段时间有用Laravel来做一些系统，但是对于gulp的知识点还是不清楚，这个主意是前端方面的知识，现在花时间来学习一下 安装插件 npm install --global gulp npm install gulp npm install gulp-uglify npm install gulp-concat gulp实例分析 // 定义依赖项和插件 var gulp=requir
创建gulp自动化工作流的步骤
weixin_30762087的博客
03-23 56
创建gulp自动化工作流的步骤 1.当前目录打开命令行2.创建package.json npm的配置文件 ->npm init 或者 ->npm init -yes3.添加一个gulp的依赖->npm install gulp --save-dev4.根目录下，新建一个gulpfile.js 文件（名称是固定的）5.在gulpfile.js中编辑任务 var gul...
Gulp4 前端自动化工作流配置
weixin_34258838的博客
03-12 397
本文首发于 个人博客：蓝色梦想。如果你刚接触 Gulp，可以查看我以前写的文章 Gulp构建前端自动化工作流（Gulp入门介绍）。 随着最近把 nodejs 从 8.x 升级到了 10.x，发现 Gulp3.x 早已经不能兼容新版的 node，并且环境中的部分依赖，也已经被淘汰。 于是趁此机会，把 Gulp 升级为 4.x 版本，并把整个环境重新改造了一下。 现已经发布至 Github 和 N...
前端自动化工具gulp怎样
最新发布
09-23
Gulp是一种前端自动化工具，它可以帮助前端开发人员自动完成一些重复性工作，例如压缩CSS和JavaScript文件、自动刷新浏览器、合并文件等。 使用Gulp需要先安装Node.js和npm，然后使用npm安装Gulp。安装完成后，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值