操作过程:

需要配置文件后才能执行 $ gulp命令

(1)配置一些基本信息,执行命令:$ npm init

在git指令中,对下面每一项进行配置,注意:GitHub项目的信息与配置文件一一对应,如果先关联了GitHub项目,那么下面的基本配置中的GitHub项目信息将自动对应生成;如果还未关联GitHub项目,那么配置基本信息时,可以对应配置GitHub相关信息。

Press ^C at any time to quit.
package name: (gulp-music-player)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (https://github.com/zhuyuzhu/gulp-music-player.git)
keywords:
author:
license: (ISC)
About to write to F:\GitHub\gulp-music-player\package.json:

{
  "name": "gulp-music-player",
  "version": "1.0.0",
  "description": "gulp前端自动化构建工具写音乐播放器",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zhuyuzhu/gulp-music-player.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zhuyuzhu/gulp-music-player/issues"
  },
  "homepage": "https://github.com/zhuyuzhu/gulp-music-player#readme"
}

当配置完成后,文件中多一个文件:package.json文件

前端自动化构建工具——gulp-LMLPHP

(2)新建一个文件:gulpfile.js文件,用来对gulp进行设置,规定gulp如何操作文件

前端自动化构建工具——gulp-LMLPHP

(3)执行命令:下载开发环境下的gulp依赖

$ npm install --save-dev gulp

这下依赖的插件、文件在自动生成的node_modules文件夹中

前端自动化构建工具——gulp-LMLPHP

而且项目文件夹中多了package-lock.json文件

前端自动化构建工具——gulp-LMLPHP

同时,package.json文件中多了:

 "devDependencies": {
    "gulp": "^3.9.1"
  }

注意:node8——npm5(可以生成package-lock.json文件);node6——npm3;

//gulp的四个方法:

// gulp.src()读取文件地址

// gulp.dest()写入文件, pipe 到多个文件夹,如果某文件夹不存在,将会自动创建它

// gulp.task()任务,做一些事情,内部带有function函数

// gulp.watch()监视文件,并且可以在文件发生改动时候做一些事情。

(4)打包压缩html文件的插件:gulp-htmlclean

通过npm指令,下载开发环境下的gulp-htmlclean插件:gulp-htmlclean

$ npm install --save-dev gulp-htmlclean

那么在gulpfile.json文件中,对html代码的配置就可以操作

var gulp = require("gulp");
var htmlclean = require("gulp-htmlclean");
//gulp的四个方法
// gulp.src()读取文件地址
// gulp.dest()写入文件, pipe 到多个文件夹,如果某文件夹不存在,将会自动创建它
// gulp.task()任务,做一些事情,内部带有function函数
// gulp.watch()监视文件,并且可以在文件发生改动时候做一些事情。

var folder = {
    src: "src/",//开发目录文件夹
    dist: "dist/" //压缩打包后的文件夹
}
//创建一个操作html的任务,该任务先读取src文件夹中的html文件,再进行压缩打包,再将处理后的html文件写入到dist文件夹中
gulp.task("html", function(){
    gulp.src(folder.src + "html/*")
        .pipe(htmlclean())
        .pipe(gulp.dest(folder.dist + "html/"))
})
gulp.task("default", ["html"])//执行该任务

(5)执行gulp命令:

$ gulp

前端自动化构建工具——gulp-LMLPHP

其结果:将src文件夹下的html文件,压缩打包到dist文件下的html文件

前端自动化构建工具——gulp-LMLPHP

 (6)压缩打包image图片,

1)首先要下载开发环境下的图片压缩插件:gulp-imagemin

$ npm install --save-dev gulp-imagemin

2)编辑gulpfile.js关于image的代码:

var gulp = require("gulp");
var htmlClean = require("gulp-htmlclean");
var imageMin = require("gulp-imagemin");
//gulp的四个方法
// gulp.src()读取文件地址
// gulp.dest()写入文件, pipe 到多个文件夹,如果某文件夹不存在,将会自动创建它
// gulp.task()任务,做一些事情,内部带有function函数
// gulp.watch()监视文件,并且可以在文件发生改动时候做一些事情。

var folder = {
    src: "src/",//开发目录文件夹
    dist: "dist/" //压缩打包后的文件夹
}
//创建一个操作html的任务,该任务先读取src文件夹中的html文件,再进行压缩打包,再将处理后的html文件写入到dist文件夹中
gulp.task("html", function(){
    gulp.src(folder.src + "html/*")
        .pipe(htmlClean())
        .pipe(gulp.dest(folder.dist + "html/"))
})
//处理图片
gulp.task("images", function(){
    gulp.src(folder.src + "images/*")//src文件夹下的images文件夹下的所有文件
        .pipe(imageMin())
        .pipe(gulp.dest(folder.dist + "images/*"))
})
gulp.task("default", ["html","images"])//执行该任务

3)执行 $ gulp 命令,对文件进行压缩打包:

(7)压缩打包js文件

1)需要下载插件:gulp-uglify

2) gulpfile.js代码中配置压缩js的代码

 

10-07 17:55