gulp的简单入门

发表于

全局安装gulp

npm install gulp -g

进入项目文件夹

cd test

创建package.json文件

npm init

3.1

3.2

配置package.json文件

4.1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": { //导入的插件以及插件版本（*表示任意版本）
    "gulp": "*", //gulp插件，默认必须
    "gulp-concat": "*", //文件合并
    "gulp-uglify": "*", //JS压缩
    "gulp-minify-html": "*", //HTML压缩
    "gulp-imagemin": "*", //图片压缩
    "gulp-clean-css": "*" //CSS压缩
  }
}

插件介绍及使用方法

安装插件

npm install

5.1

安装成功后，项目文件夹下会有一个node_modules 文件夹，里面可以找到安装的插件

5.2

5.3

创建并编辑启动文件

在项目根目录下创建gulpfile.js

6.1

编辑gulpfile.js文件

6.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//导入插件
var gulp = require("gulp"); 
var jsMin = require("gulp-uglify"); //压缩JS
var concat = require("gulp-concat"); //文件合并
var htmlMin = require("gulp-minify-html"); //压缩HTML
var cssMin = require("gulp-clean-css"); //压缩CSS
var imgMin = require("gulp-imagemin"); //压缩图片

//初始化任务
gulp.task("testJSMin", function () { //压缩JS
  gulp.src("src/js/*js") //初始JS文件URL
      .pipe(concat("index.js")) //合并文件并保存为index.js
      .pipe(jsMin()) //压缩JS
      .pipe(gulp.dest("dist/js")) //保存到dist/js下
});

gulp.task("testHtmlMin", function () { //压缩HTML
  gulp.src("src/html/*.html")
      .pipe(htmlMin())
      .pipe(gulp.dest("dist"))
});

gulp.task("testCssMin", function () { //压缩CSS
  gulp.src("src/css/*.css")
      .pipe(cssMin())
      .pipe(gulp.dest("dist/css"))
});

gulp.task("testImgMin", function () { //压缩图片
  gulp.src("src/images/*")
      .pipe(imgMin())
      .pipe(gulp.dest("dist/images"))
});

gulp.task("default", ["testJSMin", "testHtmlMin", "testCssMin", "testImgMin"]); //任务调用

启动构建

gulp

7.1

构建结果

7.2

压缩后的CSS、JS和HTML文件

7.3

7.4

7.5