Gulp

Gulp

基于Node平台开发的前端构建工具

• npm install gulp

• 在项目根目录下创建 gulpfile.js

• 重构项目文件夹结构 src目录放源代码 dist目录放构建后代码

• 在gulpfile.js 文件中编写任务

  • const gulp = require('gulp');
    
    // 1. 任务名称， 2.任务的回调函数
    gulp.task('first', () => {
      console.log('first gulp');
      // 使用 gulp.src 获取要处理的文件
      gulp.src('./src/css/base.css')
          // 将处理后的文件输出到 dist 目录
          .pipe(gulp.dest('dist/css'));
    });
    

• 在命令行执行 gulp 任务

  • npm install gulp-cli -g
  • gulp first first：指任务名称

gulp 中提供的方法

• gulp.src()：获取任务要处理的文件
• gulp.dest()：输出文件
• gulp.task()：建立gulp任务，接收两个参数1，任务名称；2，回调函数
• gulp.watch()：监控文件的变化

gulp 常用插件

• gulp-htmlmin：html文件压缩
• gulp-csso：css 压缩
• gulp-babel：js 语法转换
• gulp-less：less语法转换
• gulp-uglify：压缩混淆 js
• gulp-file-include：公共文件包含
• browsersync：浏览器实时同步

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// 压缩html代码
gulp.task('htmlmin', () => {
  // 使用 gulp.src 获取要处理的文件
  gulp.src('./src/*.html')
      .pipe(fileinclude())
      .pipe(htmlmin({collapseWhitespace: true}))
      // 将处理后的文件输出到 dist 目录
      .pipe(gulp.dest('dist'))
});
// 压缩css less
gulp.task('cssmin', () => {
  gulp.src(['./src/css/*.less', './src/css/*.css'])
      .pipe(less())
      .pipe(csso())
      .pipe(gulp.dest('dist/css'))
});
// 压缩js 转换语法
gulp.task('jsmin', () => {
  gulp.src('./src/js/*.js')
      .pipe(babel({
        // 可以判断当前代码的运行环境，将代码转换为当前环境所支持的代码
        presets: ['@babel/env']
      }))
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'))
});
// 复制文件夹
gulp.task('copy', () => {
  gulp.src('./src/images/*')
      .pipe(gulp.dest('dist/images'))
  gulp.src('./src/lib/*')
      .pipe(gulp.dest('dist/lib'))
})
// builder 命令行执行这个任务的时候依次执行这些命令
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy'])