创建gulpfile.js文件

直接在项目中手动创建即可

一般操作

var gulp  = require('gulp')
var concat  = require('gulp-concat')
var uglify  = require('gulp-uglify')
var rename  = require('gulp-rename')
var minify  = require('gulp-minify')

gulp.task('toJs', function () {
  return gulp.src('./src/js/*.js')  // 选取文件对象
    .pipe(concat('build.js'))  // (管道里)合并文件（能分别合并js和css）参数是新文件名称  gulp拥有自己的内存，在由管道送往数据文件至内存中操作
    .pipe(gulp.dest('dist/js/')) // 输出文件（文件位置） 内存执行操作需执行该操作输出文件
    .pipe(minify()) // 在原基础上(build.js)压缩文件 (要压缩其他文件得下载对应插件 gulp-clean-css 压缩css)
    // .pipe(rename({suffix: '.min'})) // 文件重命名（其实可以直接打名字,这里是使用添加文件后缀的方法） 
    .pipe(gulp.dest('./dist/js/')) // 输出文件
    // .pipe(livereload())  // livereload()该放的位置 刷新
})


gulp.task('watchs', function() { // 监听，一旦变化，执行
  // livereload.listen()  livereload该放的位置 监听
  gulp.watch('./src/js/**/*.js', gulp.series('toJs'))
  // gulp.watch(['./src/js/test1.js', '!./src/js/test2.js']], gulp.series('toJs')) // 文件路径可以是数组  ！！！感叹号表示排除
})

gulp.task('default', gulp.series(gulp.parallel('toJs'))) 
// 如果是gulp3及以下的话，可以直接多个人物名，现在gulp需要series(依赖,顺序执行) parallel(并行计算，多个依赖嵌套)

个人见解

gulp.task('default', gulp.series('less', gulp.parallel('toCss', 'toJs')), function(){})  
// 需先完成less编译，再执行css操作，节省时间，css和js可以并行操作

// gulp3-中
gulp.task('css', ['less'], function(){}) 先完成less任务，才开始css任务

gulp与grunt

grunt 只能同步

gulp 可以异步

gulp task任务函数里加 return的区别：

• 加return 执行任务是异步的 （先启动的任务不一定先完成）
• 不加return 执行任务是同步的 （先启动的任务完成之后才能进行下一个任务）

插件说明

gulp本身api能干的事情有限

• gulp.src

• gulp.task

• gulp.dest

• gulp.watch等

其主要还是得通过其插件去完成更多功能

插件	用途
gulp-concat	合并文件（能分别合并js和css）
gulp-uglify	混淆加密js文件 会忽略一些没用的变量或函数
gulp-minify	混淆压缩js文件
gulp-clean-css	压缩css文件
gulp-csso	智能压缩css文件
gulp-clean	删除文件夹
gulp-htmlmin	压缩html文件
gulp-rename	文件重命名
gulp-less	编译less
gulp-base64	css中引用的图片转base64
gulp-html-replace	向html中添加/替换link和script(现在html中写占位)
gulp-livereload	实时自动编译刷新（其实不加也可以监听刷新等，但是建议还是加上）
gulp-connect	热加载（webpack的dev, 本地的biu）
open	自动打开浏览器 该插件和gulp没有直接关系，是全平台通用的

… 更多插件 去gulp英文官网查找

gulp-load-plugins

gulp-load-plugins 该插件里面什么都有, 有了他，之前很多插件都可以不引入

var $ = require('gulp-load-plugins')()  // 函数执行 返回对象

$.concat('build.js')
$.uglify()
$.rename({suffix: '.min'})
$.livereload.listen()

$.方法名是有讲究的

• gulp-less 则 less

• gulp-clean-css 则 cleanCss 写成clean-css 是错的！！！！

• gulp-htmlmin 则 htmlmin ，写成htmlMin 是错的！！！ ！