gulp的核心文件配置思路(二）

gulp的核心文件配置思路(二）

上一篇博客我们已经完成了文件的整理，但是gulp作为一个构建工具，能够做到的远远不止整理目录这么简单。它之所以强大，在于它能够使用插件。
gulp插件
打开gulp官网，点击选择插件，到目前为止node提供有4000多个包可以供gulp这个构建工具使用，所以我们用gulp能实现的东西，远远不止这些。梳理几个我们在编写项目时常用的插件：
一样的思路,html,css,js 这三种类型的文件我们分别需要对其进行什么操作呢？

• html我们可能需要对其进行压缩
• css我们可能会用到less或者scss的处理插件，和压缩插件
• js我们可能会用到es6转es5插件，以及js的压缩插件

有了这个大致的轮廓，来看一下实际例子：
关于css配(假设项目中我们使用ess编写）：

1. 先下载插件，使用npm install --save-dev gulp-less(因为只有开发环境我们才用到）
2. 引入插件至项目中

const gulpLess = require('gulp-less')

3.把转换的任务交代给gulp(在上一篇文章的基础上进行内容填充）

gulp.task('copy-css',function(){
  gulp.src('src/*.less')
  .pipe(gulpLess())
  .pipe(gulp.dest('public/css')
})

这样我们经过插件的处理，就把less文件转换成了css，我们src目录下就可以用less去书写项目中的样式，但是输出的public文件中就被转换成了css

注意： 那我们在写html的时候应该引用的是public文件下的css文件，而不是src下的less文件

那css的体积在小一点是不是更好呢？
这时候我们用到css的压缩插件（gulp-minify-css)
插件的操作步骤：下载-引入-使用

gulp.task('copy-css',function(){
  gulp.src('src/*.less')
  .pipe(gulpLess())
  .pipe(gulp.dest('public/css')
  .pipe(gulpMinifyCss())
  .pipe(rename(function(path){
      return {basename:path.basename+'.min',
              extname: ".css",
              dirname: path.dirname}
    })
   .pipe(gulp.dest('public/css')
})

这里可能会有疑问，为什么不less处理后直接压缩，输出至目录，偏偏要在输出一遍？
当你在命令行中执行gulp copy-css 这个任务后，你会发现public下的css目录下生成了两个文件，一个是X.css另外一个是X.min.css。前者是未压缩的，供我们开发者查看调试，后者是压缩版本，供代码引用上线使用。所以在写html页面引入样式时，应该引入压缩后的css文件，优点是体积小，占用空间少，并且功能也提供到了，适用于线上使用。

关于html和js的插件使用问题，我就不赘述了，在gulp官网的插件中输入关键字查找，按照步骤配置就行。

配置到这里还有一个问题，我每次改动都要一个命令一个任务的去执行吗？这不是很恼火?那我们可不可以创建一个统一任务，它的任务就是将这些命令都执行了。

gulp.task('build',['copy-html','copy-css','copy-js','copy-data','copy-image'])

这样我们在命令行中输入gulp build就可以执行上面的所有任务了
注意：这样写如果报错就是gulp版本的问题，gulp -v 查看版本 如果是3.X这么写是没问题的。如果是4.X要求第二个参数必须是一个函数，那么我们就要修改一下写法：

gulp.task('build',gulp.series(['copy-html','copy-css','copy-js','copy-data','copy-image'],function(){
  console.log('打包成功！')
}))

这样就不会报错了。

多任务统一办到了，可是还是有点麻烦，每改动一次文件内容，就要执行一次这个任务，能启动任务监听吗？

gulp.task('watch',function(){
  gulp.watch('./src/*.less',gulp.series(['copy-css']))
  gulp.watch('src/*.html',gulp.series(['copy-html']))
  gulp.watch('src/image/**/*',gulp.series(['copy-image']))
  gulp.watch('src/js/*.js',gulp.series(['copy-js']))
})

关于watch的第二个参数也可以直接是一个数组(gulp版本问题）
这样我们就启动了gulp的监听，每次有文件改动，就会监听到此文件的变化，然后执行相应的任务。

如果想要在页面上直接看到改动的效果呢？那起一个本地服务把，让它实现每次改变页面都重新加载（gulp-connect)

gulp.task('server',function(){
  connect.server({
    root:'./public',
    livereload:true,
    port:8888
  })
})

这样我们就给我们创建的项目起了一个本地服务，界面上呈现的是public的内容，public也就是我们要打包发测试发生产的包，这样做直观清晰又准确。将liverload设置为true后，上述的每一个任务后都要加.pipe(connect.reload())，例如：

gulp.task('copyHtml',function(){
   return gulp.src('src/*.html').pipe(gulp.dest('public')).pipe(connect.reload())
})

这样就可以在页面也实时看到每一个文件改动的效果了

最后，将监听和本地服务一起启动，设置为默认的task:

gulp.task('default',gulp.series(['watch','server']))

这样，我们就完成了一个基础的gulpfile.js的文件配置

gulp搭建项目的总结：其实gulp搭建项目的过程就是一个任务分配的过程，只要弄清楚针对某一项任务需要做什么操作，在找到对应的插件进行设置，那么配置这个文件的过程就是简单又有趣的。

以上就是我关于gulp配置的大体思路，如有不合理的地方，欢迎指正。