前端自动化构建工具——gulp
操作过程:
需要配置文件后才能执行 $ gulp命令
(1)配置一些基本信息,执行命令:$ npm init
在git指令中,对下面每一项进行配置,注意:GitHub项目的信息与配置文件一一对应,如果先关联了GitHub项目,那么下面的基本配置中的GitHub项目信息将自动对应生成;如果还未关联GitHub项目,那么配置基本信息时,可以对应配置GitHub相关信息。
[code]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依赖
[code]$ npm install --save-dev gulp
这下依赖的插件、文件在自动生成的node_modules文件夹中
而且项目文件夹中多了package-lock.json文件
同时,package.json文件中多了:
[code] "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
[code]$ npm install --save-dev gulp-htmlclean
那么在gulpfile.json文件中,对html代码的配置就可以操作
[code]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命令:
[code]$ gulp
其结果:将src文件夹下的html文件,压缩打包到dist文件下的html文件
(6)压缩打包image图片,
1)首先要下载开发环境下的图片压缩插件:gulp-imagemin
[code]$ npm install --save-dev gulp-imagemin
2)编辑gulpfile.js关于image的代码:
[code]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的代码
阅读更多
- gulp--基于流的前端自动化构建工具
- 前端自动化构建工具gulp
- gulp.js-前端自动化构建工具
- 前端自动化构建工具--gulp
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- Gulp前端自动化构建工具的应用
- 前端打包/自动化构建工具:gulp
- Gulp.js—比Grunt更易用的前端构建工具-前端自动化
- gulp前端自动化构建工具(一):工具介绍和使用
- 前端自动化构建工具----gulp安装教程
- 做一个合格的前端,gulp自动化构建工具入门教程
- 前端项目自动化构建工具gulp
- gulp前端自动化构建工具使用
- 前端自动化构建工具---gulp的安装与基本使用方法
- gulp前端自动化构建工具(四):gulp文件路径处理模块
- gulp 前端自动化构建工具之构建less
- gulp前端自动化构建工具(二):gulp插件/gulp模块介绍
- 前端自动化构建工具gulp记录
- gulp前端自动化构建工具(三):gulp工具配置文件