gulp

gulp

官网
中文网

• 前端自动化构建工具
• js: function(){//},代码压缩,混淆 : var name = 123,var x = 123
• css,
• 合并: 1个js 1kb ,有10个js.

5个核心方法

• gulp.task(‘任务名’,function(){}) // 创建任务。
• gulp.src(’./*.css’) 指定想要处理的文件
• gulp.dest() // 指定最终处理后的文件的存放路径
• gulp.watch() // 自动的监视文件的变化，然后执行相应任务。
• gulp.run(‘任务名’)，直接执行相应的任务。

安装gulp

• 通过npm安装:npm install gulp-cli -g

gulp使用

• 1.在当前项目中也要安装gulp: npm install gulp --save
• 2.还需要在当前项目中新建一个文件: gulpfile.js

    var gulp =  require('gulp');

    // 创建任务
    // 第一个参数: 任务名
    // 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
    gulp.task('test', function(){
      console.log(123)
})

• 3.执行任务: gulp 任务名
  • 示例: gulp test

对js进行压缩

• npm install gulp-uglify --save

对js进行合并操作

• npm install gulp-concat --save

    gulp.task('script', function(){
  // 1.要匹配到要处理的文件
  // 指定指定的文件:参数是匹配的规则
  // 参数也可以是数组，数组中的元素就是匹配的规则
  gulp.src(['./app.js','./sign.js'])
  // concat 的参数是合并之后的文件名字
  .pipe(concat('index.js'))
  .pipe(uglify())
  // dest方法参数，指定输出文件的路径
  .pipe(gulp.dest('./dist'))
})

对css进行压缩操作

• npm install gulp-cssnano --save

   // 新建一个任务，对css进行处理
gulp.task('style', function(){
  // 对项目中的2个css文件进行合并，压缩操作
  // 1.匹配到要处理的文件
  gulp.src(['./*.css'])
  // 2.合并文件
  .pipe(concat('index.css'))
  // 3.压缩操作
  .pipe(cssnano())
  // 4.输出到指定目录
  .pipe(gulp.dest('./dist'))
  })

对html进行压缩

• npm install gulp-htmlmin --save
• https://github.com/kangax/html-minifier

    // 新建一个任务，对html进行压缩
gulp.task('html', function(){
 // 1.匹配到要处理的文件
 gulp.src(['./index.html'])
 // 2.压缩操作
 .pipe(htmlmin({collapseWhitespace:true}))
 // 3.指定输出目录
 .pipe(gulp.dest('./dist'))
})

gulp.watch

• 监视文件的变化，然后执行相应的任务
• gulp.run, 直接执行指定的任务

    // gulp.watch 监视文件变化，执行相应任务
  gulp.task('mywatch', function(){
  // 执行指定的任务
  gulp.run('script')
  // 1.监视js文件的变化，然后执行script任务
  // 第一个参数：要监视的文件的规则
  // 第二个参数：是要执行的任务
  gulp.watch(['./app.js','sign.js'],['script'])
})

gulp配置文件示例

const gulp = require('gulp')
const uglify = require('gulp-uglify-es').default
const rename = require('gulp-rename')
const less = require('gulp-less')
const minifycss = require('gulp-minify-css')
const imagemin = require('gulp-imagemin')
const cache = require('gulp-cache')
const minifyhtml = require('gulp-minify-html')
const extender = require('gulp-html-extend')
const del = require('del')
const connect = require('gulp-connect')



gulp.task('lib', function () {
  return gulp.src('./src/lib/**/*.*').pipe(gulp.dest('./dist/lib')).pipe(connect.reload())
})
gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less())
    .pipe(rename({
      extname: '.css'
    }))
    .pipe(minifycss())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./dist/css')).pipe(connect.reload())
})
gulp.task('js', function () {
  return gulp.src('./src/js/*.js').pipe(uglify()).pipe(rename({
    suffix: '.min'
  })).pipe(gulp.dest('./dist/js')).pipe(connect.reload())
})
gulp.task('images', function () {
  return gulp.src('./src/images/*').pipe(cache(imagemin())).pipe(gulp.dest('./dist/images')).pipe(connect.reload())
})
gulp.task('html', function () {
  return gulp.src('./src/*.html').pipe(extender()).pipe(minifyhtml()).pipe(gulp.dest('./dist')).pipe(connect.reload())
})
gulp.task('clean', function () {
  return del('./dist')
})
gulp.task('watch', function () {
  gulp.watch('./src/**/*.html', gulp.series('html'))
  gulp.watch('./src/less/*.less', gulp.series('less'))
  gulp.watch('./src/js/*.js', gulp.series('js'))
  gulp.watch('./src/lib/**/*.*', gulp.series('lib'))
  gulp.watch('./src/images/*.*', gulp.series('images'))
})
gulp.task('connect', function () {
  return connect.server({
    // 服务器的根目录
    root: './dist',
    livereload: true,
    port: 9999
  })
})
gulp.task('default', gulp.series('clean', 'html', 'less', 'js', 'images', 'lib', gulp.parallel('watch', 'connect')))