操作过程:
需要配置文件后才能执行 $ 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文件
(2)新建一个文件:gulpfile.js文件,用来对gulp进行设置,规定gulp如何操作文件
(3)执行命令:下载开发环境下的gulp依赖
$ npm install --save-dev gulp
这下依赖的插件、文件在自动生成的node_modules文件夹中
而且项目文件夹中多了package-lock.json文件
同时,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
其结果:将src文件夹下的html文件,压缩打包到dist文件下的html文件
(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的代码