gulp快速入门

Posted 2020-06-23 咸鱼老弟

tags:

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

今天刚入职了一家新公司，结果明天就要开始项目了。上级说要用gulp来打包代码，所以今晚花了一晚来看这个gulp，

可以说已经入门了。所以做一个小小的总结：

首先全局安装gulp

npm install gulp -g

　然后我在F:/盘新建一个gulpDemo路径，

　　进入到这里面,在本地再次安装一次gulp，我也不知道为什么本地还要安装。你就装吧，哈哈

不过，在安装之前，确保 gulpDemo 这个文件夹里有package.json 这个文件

这个文件如下：

/package.json

{
  "name": "xianyulaodi",
  "version": "1.0.0",
  "description": "this is a gulp",
  "main": "",
  "dependencies": {
    "del": "^2.2.0",
    "gulp": "^3.9.1",
  },
  "devDependencies": {},
  "scripts": {
    "test": "gulp"
  },
  "keywords": [
    "gulp"
  ],
  "author": "xianyulaodi",
  "license": " MIT"
}

在 gulpDemo 这个文件夹里再次安装gulp

C:\Users\>f:

F:\>cd gulpDemo npm install gulp --save-dev

gulpfile.js配置

在gulpDemo 这个根目录下新建一个 gulpfile.js

然后在cmd执行如下命令，安装一些插件：

C:\Users\>f:

F:\>cd gulpDemo npm install gulp-uglify gulp-minify-css gulp-concat gulp-rename --save

gulpfile.js 内容如下：

var gulp =require("gulp");//创建 gulp模块
var uglify=require("gulp-uglify");//创建js混淆压缩 模块
var minify_css =require("gulp-minify-css");　//创建 css混淆压缩模块
var gulp_concat = require(‘gulp-concat‘);  //创建 文件合并模块

官方的API如下

**官方API**

        gulp.task(name[, deps], fn)
        gulp.src(globs[, options])
        gulp.dest(path[, options])
        gulp.watch(glob [, opts], tagulpsks)

先不用管，只需要知道有这四个属性就行

在 gulpDemo 目录里新建一个 src目录，里面有css文件夹，放一个test.css.

此外，还需要新建dist目录，里面有css文件

如:

gulpDemo

./src/css/test.css

./dist/css

接着在 gulpfile.js补充下面的代码

 gulp.task(‘min-css‘,function(){  //1
        gulp.src(‘./src/css/*.css‘)  //2
        .pipe(gulp_concat("main.min.css"))//3 
        .pipe(minify_css())//4.混淆即压缩
        .pipe(gulp.dest(‘./dist/css‘));//5.输出路径
    });

在cmd里面执行 gulp min-css

在dis/css这个文件夹里，你就会发现有一个 mian.min.css, 这个就是 /src/css/test.css经过压缩之后的代码。

所以我们的用gulp打包测试成功

接下来逐一解释 1、2、3、4、5

1. gulp.task(‘min-css‘,function(){ }

第一个参数name是自定义你的任务名称，所以执行打包的命令是 gulp name, 比如我叫min-css,就gulp min-css 。我把min-css改为 xianyu,打包命令就为 gulp xianyu
第二个参数[deps]是一个数组，里面是你定义的其他任务的名称，这些任务会在本次定义的任务之前执行并完成。
第三个参数fn是本次任务的回调函数。