20分钟快速gulp入门

Posted Mopecat

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20分钟快速gulp入门相关的知识，希望对你有一定的参考价值。

在互联网告诉发展的今天，自node出现后，我们前端也越来越大（心里美美哒~），同样带来的Web业务日益复杂化和多元化，模式也都想webPage模式转向webApp模式，拼几个页面搞几个jquery的插件就能搞一个完成一个项目的日子已经是很久远的曾经了，而且从前要实现压缩代码，压缩图片，上传到服务器等等等需要各种工具才能实现的功能，用起来很麻烦。所以出现了各种前端构建化工具也应运而生： grunt,gulp,webpack等已经成为现在前端开发工程师的必备技能之一。最新的 Parcel也大出风头，因为Webpack 提供的“零配置”的进展缓慢和混沌不清，不过现在 webpack4.0已经发布了，还不清楚未来的走向~ 好，说了这么多，该说说今天的主角了，虽然已经不是前沿的技术了，但是用起来非常的简单方便人性化，下面就来简单介绍介绍基础用法啦~

安装

在确保你的电脑里装了node的情况下，打开命令行执行以下代码：

 
   
   
 
    
  
    
    
  
  1.  npm install --global gulp
    2.

全局安装gulp，打开命令行输入 gulp-v有版本号则证明安装成功啦 然后创建一个文件夹，名字随你啦~我们接下来的操作都在这个文件夹中进行啦~ 我创建的文件夹叫 gulpexample，如果你的电脑中安装了git请进入这个文件夹然后右键选择 git bash here，如果没有安装那就进入 cmd然后进入相应的文件目录啦~然后~

  • 执行 npm init之后会让你填名字啊 作者啊 描述啊 之类的 剩下的你就一顿回车，之后你的文件夹中就会自动生成一个 package.json文件

  • 然后在命令行中执行 npm instal gulp--save-dev在当前项目中安装gulp

好啦，现在gulp就安装完毕了~接下来我们可以骚操作了

  • 在根目录创建一个文件命名为 gulpfile.js（必须是这个，不能变哦）

  • 在根目录穿件一个文件夹 src 简单的介绍一下gulp的api

 
   
   
 
    
  
    
    
  
  1. /*
    2. 
  
    
    
  
  2. *
    3. 
  
    
    
  
  3. *  gulp.task -- 定义任务
    4. 
  
    
    
  
  4. *       gulp.task('任务名，命名随你啦',fn);
    5. 
  
    
    
  
  5. *  gulp.src  -- 找到需要执行任务的文件
    6. 
  
    
    
  
  6. *       gulp.src('要执行的文件的目录').pipe(要执行的api)
    7. 
  
    
    
  
  7. *  gulp.dest -- 执行任务的文件的去处
    8. 
  
    
    
  
  8. *       gulp.dest('文件的去处目录（若没有回创建文件夹）')
    9. 
  
    
    
  
  9. *  gulp.watch -- 观察文件是否变化
    10. 
  
    
    
  
  10. *       gulp.watch('要监控的文件目录下的文件','变化后要执行的task')
    11. 
  
    
    
  
  11. *
    12. 
  
    
    
  
  12. * */
    13.

然后我们简单的应用一下感受一下gulp的用法

  • 打开 gulpfile.js输入如下代码：

 
   
   
 
    
  
    
    
  
  1. var gulp = require('gulp');
    2. 
  
    
    
  
  2. // 定义任务
    3. 
  
    
    
  
  3. gulp.task('message',function(){
    4. 
  
    
    
  
  4.     return console.log('gulp is running!');
    5. 
  
    
    
  
  5. });
    6.

  • 然后再当前文件夹目录下的命令行中执行 gulp message 

  • 可以看到 gulpisrunning证明任务已经执行了

接下来为大家简单介绍一下：拷贝文件，压缩合并js，sass编译，压缩图片的用法。 首先来安装上述功能相对应的插件(同样也是在相应的目录下执行哦)

 
   
   
 
    
  
    
    
  
  1. npm install gulp-sass gulp-concat gulp-uglify gulp-imagemin --save-dev
    2.

安装可能会有些慢，如果实在受不了的话可以安装淘宝的镜像cnpm 然后用cnpm执行哦~ cnpm的安装如下：

 
   
   
 
    
  
    
    
  
  1. npm install -g cnpm --registry=https://registry.npm.taobao.org
    2.

安装完gulp的插件后在项目根目录新建文件夹 src，打开 gulpfile.js开始配置~；

  • 第一步，引入插件

 
   
   
 
    
  
    
    
  
  1. // 引入gulp及插件
    2. 
  
    
    
  
  2. var gulp = require('gulp'); 
    3. 
  
    
    
  
  3. var imagemin = require('gulp-imagemin'); // 图片压缩
    4. 
  
    
    
  
  4. var uglify = require('gulp-uglify'); // js压缩
    5. 
  
    
    
  
  5. var sass = require('gulp-sass');// sass编译
    6. 
  
    
    
  
  6. var concat = require('gulp-concat'); // 代码合并
    7.

  • 第二步，定义任务 我们先来定义个简单的任务来再次熟悉一下 gulp的用法~ 下面定义一个拷贝html的任务

任务一， 拷贝html

 
   
   
 
    
  
    
    
  
  1. // 任务：拷贝html
    2. 
  
    
    
  
  2. gulp.task('copyHtml',function(){
    3. 
  
    
    
  
  3.     // 选取到src目录下的所有html文件 （为了测试效果，请自己再src目录下随便创建两个html文件咯）
    4. 
  
    
    
  
  4.     gulp.src('src/*.html')
    5. 
  
    
    
  
  5.         .pipe(gulp.dest('dist')); // 将html拷贝到dist目录下，没有dist会自动生成
    6. 
  
    
    
  
  6. });
    7.

在命令行里执行 gulp copyHtml 就可以啦，赶紧去看看你的文件夹里成功拷贝了么？

任务二， 图片压缩

准备工作：在src目录下新建images文件夹，在里面随便放几张图片

 
   
   
 
    
  
    
    
  
  1. // 任务： 图片压缩
    2. 
  
    
    
  
  2. gulp.task('imagemin',function(){
    3. 
  
    
    
  
  3.     gulp.src('src/images/*')
    4. 
  
    
    
  
  4.         .pipe(imagemin()) // 调用插件imagemin
    5. 
  
    
    
  
  5.         .pipe(gulp.dest('dist/image')) // 压缩后的图片输出目录
    6. 
  
    
    
  
  6. });
    7.

同样命令行执行 gulp imagemin 即可完成输出， 现在你应该基本了解gulp的任务写法了，接下来的几个任务我就不细说了，直接上代码

 
   
   
 
    
  
    
    
  
  1. // sass 编译 src目录下件文件夹sass然后在里面新建一个sass文件，按照sass的语法写一些样式
    2. 
  
    
    
  
  2. gulp.task('sass',function(){
    3. 
  
    
    
  
  3.     gulp.src('src/sass/*') // 获取sass文件（*.scss）
    4. 
  
    
    
  
  4.         .pipe(sass().on('error',sass.logError)) // 执行sass插件，并检查错误
    5. 
  
    
    
  
  5.         .pipe(gulp.dest('dist/css')); // 输出css文件的路径
    6. 
  
    
    
  
  6. });
    7. 
  
    
    
  
    8. 
  
    
    
  
  8. // 合并压缩代码，src目录下新建文件夹js然后在里面创建几个js文件
    9. 
  
    
    
  
  9. gulp.task('scripts',function(){
    10. 
  
    
    
  
  10.     gulp.src('src/js/*.js') // 获取js文件
    11. 
  
    
    
  
  11.         .pipe(concat('main.js')) // 合并文件为main.js
    12. 
  
    
    
  
  12.         .pipe(uglify()) // 压缩js代码
    13. 
  
    
    
  
  13.         .pipe(gulp.dest('dist/js')) // 输出合并压缩后的文件路径
    14. 
  
    
    
  
  14. });
    15.

现在4个api我们已经用了3个了，还有一个监听的 watch没有用，简单介绍一下，字面意思监听相应目录下的文件是否发生改变，如果改变执行某个任务，即一个参数为监听目录，另一个参数为要执行的任务，（watch是一个持续执行的任务结束的话是不会停止的哦）代码如下：

 
   
   
 
    
  
    
    
  
  1. // 监听文件是否发生变化
    2. 
  
    
    
  
  2. gulp.task('watch',function(){
    3. 
  
    
    
  
  3.     gulp.watch('src/js/*.js',['scripts']); // 监听src/js/下的所有js文件，如果发生变化则执行任务scripts,下面同理
    4. 
  
    
    
  
  4.     gulp.watch('src/sass/*',['sass']);
    5. 
  
    
    
  
  5.     gulp.watch('src/*.html',['copyHtml']);
    6. 
  
    
    
  
  6.     gulp.watch('src/images/*',['imageMin']);
    7. 
  
    
    
  
  7. });
    8.

现在就已经有了5个任务了（算上最开始的 message就6个了）每一个任务都要执行一遍命令行是不是很麻烦。如果任务更多了那就更烦了，不要担心， gulp为我们准备了默认任务 default

 
   
   
 
    
  
    
    
  
  1. // 定义默认任务 , 这里的默认任务default不能随便定义 只能是default,后面接受一个数组作为参数，传入默认执行的任务，后面还可以接受一个回调函数用以执行默认任务代码这里就不给做展示了
    2. 
  
    
    
  
  2. gulp.task('default',['message','copyHtml','sass','scripts','imageMin','watch']);
    3.

定义好默认任务如上后，在命令行中输入 gulp回车即可按照参数中的任务顺序全部执行。

结语

今天的gulp分享就告一段落啦~希望能对大家有所帮助。本次分享只是入门教程，简单的介绍了基础用法，实际项目中更复杂的用法日后会陆续分享给大家哒~如果喜欢给点个赞啦（比心心~~），后续预告~~本周还会出webpack的相关入门分享给大家


以上是关于20分钟快速gulp入门的主要内容，如果未能解决你的问题，请参考以下文章

20分钟快速入门Gradle

gulp快速入门

gulp系列之快速入门篇

webpack快速入门

Glup快速入门整理

一文看懂低代码，5分钟从入门到原理全搞定