乐趣区

关于gulp:Gulp

Gulp

 基于 node 平台开发的前端构建工具,将机械化操作编写成工作,想要执行机械化操作只须要输出命令即可,用机器执行手工,进步开发效率

### Gulp 的作用

  • 我的项目上线 HTML CSS JS 文件压缩合并
  • 语法转换(es6,less 等等)
  • 公共文件抽离
  • 批改文件浏览器主动刷新

Gulp 的应用

命令行工具:npm install cli -g

  • 应用 npm install gulp 下载 gulp 库文件
  • 在我的项目根目录下建设 gulpfile.js 文件
  • 重构我的项目的文件夹构造 src 目录搁置源代码文件 dist 目录搁置构建后文件
  • 在 gulpfile.js 文件中编写工作.
  • 在命令行工具中执行 gulp 工作

Gulp 中提供的办法

gulp.src():获取工作要解决的文件
gulp.dest():输入文件
gulp.task():建设 gulp 工作
gulp.watch():监控文件的变动
// 引进 gulp 模块
const gulp = require('gulp');

// 建设 gulp 工作
gulp.task('first', () => {
    // 获取要解决的文件
    gulp.src('./src/1.hello word.js')
        // 将解决好的工作输入到 dist 目录
        .pipe(gulp.dest('./dist'))

})

Gulp 插件

gulp-htmlmin:html 文件压缩
gulp-csso:压缩 css
gulp-babel:JavaScript 语法转化
gulp-less: less 语法转化
gulp-uglify:压缩混同 JavaScript
gulp-file-include 公共文件蕴含
browsersync 浏览器实时同步
退出移动版