新建一个项目文件夹

在文件夹中右击 git bash here出现命令行

查看node npm 的版本

通过 node -v npm -v 来获取

全局安装gulp

npm install gulp -g 或者使用 npm install –global gulp

如果安装过程中出现以下内容：

Unexpected end of JSON input while parsing near ‘…86’,’tarball’:’https:’

可以在命令提示行中输入：npm cache clean -force 进行解决

cnpm淘宝镜像安装

如果用npm 安装比较慢，可以通过淘宝镜像进行处理 cnpm
淘宝镜像的安装方式：npm install -g cnpm –registry=https://registry.npm.taobao.org

在项目目录下创建package.json文件

Npm init 上述命令将指引设置项目名/版本/描述信息等，
安装gulp,作为开发时依赖项
Npm install –save-dev gulp

Package.json 插件版本号
Package-lock.json 插件安装目录
Node_modules 插件安装包

创建开发和导出文件夹

开发文件夹是src,导出文件夹是dist。

创建html任务

gulp.task(‘html’,function(){Gulp.src(folder.src+’html/*’).pipe(folder.dist+’html/’)
})

创建了html任务，但是页面加载的时候默认执行的是default任务，然后将html任务放置到任务队列的后面。
Gulp.task(‘default’,gulp.series(‘html’));
注意: gulp4版本之后，default右边的两个参数需要放在gulp.series()的参数中。

此时还是有报错，提示‘html’ errored after 6.34ms TypeError:dest.on is not a function at DestroyableTransform.Readable.pipe
Gulp.pipe(‘路径’)，这样是不能处理任务的，需要通过gulp.dest(‘路径’)的方式处理

Gulp4版本之后，如果要在页面加载时处理多个任务，则需要通过gulp.parallel(‘’,’’,’’)的方式进行处理。

压缩文件

Gulp-htmlclean 下载压缩插件 npm install gulp-htmlclean --save-dev
或者使用淘宝镜像进行处理 cnpm install gulp-htmlclean –save-dev
插件下载完成后，调用插件的方法如下：
Var htmlclean = require(‘gulp-htmlclean’);
在文件导出之前需要进行压缩，通过pipe的方式进行压缩

压缩图片

有单独的压缩插件 gulp-imagemin
下载插件 npm install gulp-imagemin –save-dev
使用淘宝镜像 cnpm install gulp-imagemin –sace-dev
使用插件的用法如下：
Var imagemin = require(‘gulp-imagemin’);
Imagemin();图片压缩执行函数

压缩js的插件

Gulp-uglify 压缩js文件
下载插件 npm install gulp-uglify –save-dev
使用淘宝镜像 cnpm install gulp-uglify –save-dev
使用插件的用法如下：
Var uglify = require(‘gulp-uglify’);

去掉js中的调试语句

Gulp-strip-debug
下载插件 npm install gulp-strip-debug –save-dev
使用淘宝镜像 cnpm install gulp-strip-debug –save-dev
使用插件的用法如下：
Var debug = require(‘gulp-strip-debug’);
去掉js中的调试语句，然后再进行压缩。

将less转化成css

Gulp-less
下载插件 npm install gulp-less –save-dev
使用淘宝镜像 cnpm install gulp-less –save-dev
使用插件的用法如下：
Var less = require(‘gulp-less’);

压缩css

Gulp-clean-css
下载插件 npm install gulp-clean-css –save-dev
使用淘宝镜像 cnpm install gulp-clean-css –save-dev
使用插件的用法如下：
Var cleancss = require(‘gulp-clean-css’);

给css3属性添加前缀

Gulp-postcss autoprefixer
下载插件 npm install gulp-postcss autoprefixer –save-dev
使用淘宝镜像 cnpm install gulp-postcss autoprefixer –save-dev
使用插件的用法如下：
Var postcss = require(‘gulp-postcss’);
Var autopre = require(‘autoprefixer’);
使用的时候，autopre执行的结果要以数组的形式作为postcss的参数进行传递

开启服务器

Gulp-connect

设置开发或者生产环境

Export NODE_ENV=development

var gulp = require("gulp");
var imagemin = require("gulp-imagemin")
var htmlclean = require("gulp-htmlclean");
var uglify = require("gulp-uglify");
var stripDebug = require("gulp-strip-debug");
var concat = require("gulp-concat");
var deporder = require("gulp-deporder");
var less = require("gulp-less");var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var cssnano = require("cssnano");
var connect = require("gulp-connect");var folder = {src : "src/",dist : "dist/"
}var devMode = process.env.NODE_ENV !== "production";//流操作 task running
gulp.task("html",function(){var page =  gulp.src(folder.src + "html/index.html").pipe(connect.reload());if(!devMode){page.pipe(htmlclean());}page.pipe(gulp.dest(folder.dist + "html/"))
})gulp.task("images",function(){gulp.src(folder.src + "images/*").pipe(imagemin()).pipe(gulp.dest(folder.dist+"images/"))
})
gulp.task("js",function(){var js = gulp.src(folder.src+"js/*").pipe(connect.reload());if(!devMode){js.pipe(uglify()).pipe(stripDebug())}   js.pipe(gulp.dest(folder.dist+"js/"))
})
gulp.task("css",function(){var css = gulp.src(folder.src+"css/*").pipe(connect.reload()).pipe(less());var options = [autoprefixer()];if(!devMode){options.push(cssnano())}css.pipe(postcss(options)).pipe(gulp.dest(folder.dist + "css/"))
})
gulp.task("watch",function(){gulp.watch(folder.src + "html/*",["html"]);gulp.watch(folder.src + "images/*",["images"]);gulp.watch(folder.src + "js/*",["js"]);gulp.watch(folder.src + "css/*",["css"]);
})
gulp.task("server",function(){connect.server({port : "9900",livereload : true,// root:'./dist'});
})gulp.task("default",["html","images","js","css","watch","server"]);

执行的时候，可以在当前目录下，执行gulp即可。

gulp构建qq音乐播放器相关推荐

QQ音乐播放器-jQuery实现
QQ音乐播放器案例展示案例实现的功能静态页面的布局歌曲信息的动态显示鼠标悬停,功能按钮和文字高亮歌曲信息的动态显示歌曲播放进度条显示和动态移动纯净模式的模板设置和歌词写入案例布局 ...
html5卡拉OK音乐播放器,QQ音乐播放器怎么打开卡拉OK模式
QQ音乐播放器怎么打开卡拉OK模式时间:2020-08-05 12:25:56 责任编辑:随便就行 QQ音乐播放器怎么打开卡拉OK模式?QQ音乐播放器是生活中常用的音乐播放器,很多人在使用QQ音乐播 ...
QQ音乐播放器部分笔记
QQ音乐播放器案例 1. 基本结构分析三个部分: 头部区域中间内容区左边歌曲列表信息上边按钮工具条和下边的滑动列表[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img- ...
Qt5学习模仿qq音乐播放器样式（2）——点击动画效果+歌词颜色变换展示
拖的太久,主要再上一篇文章中,新学习了相关知识,做了右键菜单,点击按钮动画切换窗口和播放时歌词颜色显示当前播放位置. 主要为了实现功能的展示,所以很多文件读取都直接采用了本地文件这种比较low的方式. ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
从零玩转jQuery之项目开发（QQ音乐播放器）
QQ音乐播放器项目大体效果如下: HTML结构分析: 一.页面布局 1.首先来看下HTML大体结构: <div class="header"></div> ...
qq音乐播放器2014最新版 v10.23.4377 官方版
qq音乐播放器2014最新版 v10.23.4377 官方版软件大小:11MB 软件语言:简体中文软件性质:常用软件软件授权:官方版更新时间:2014-05-06 应用平台:/Win8/Win ...
qq音乐播放器2014最新版 v10.21.4270 官方版
qq音乐播放器2014最新版 v10.21.4270 官方版软件大小:11MB 软件语言:简体中文软件性质:常用软件软件授权:官方版更新时间:2014-03-31 应用平台:/Win8/Win ...
【QQ音乐】QQ音乐播放器超酷使用技巧逐个揭秘
[编者按]QQ音乐播放器凭借QQ强大的人气,目前已经成为许多朋友听歌的首选了,它带给我们无与伦比的快乐音乐体验.QQ音乐播放器的功能是如此的丰富,用户不仅仅是简单的在线听歌,还可以观看MV.收听在线广 ...

gulp构建qq音乐播放器