gulp构建qq音乐播放器

我不是女神ヾ 2021-07-25 17:22 495阅读 0赞

# 新建一个项目文件夹 #

# 在文件夹中右击 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:’  
![在这里插入图片描述][20200407144543330.png]  
可以在命令提示行中输入：`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`

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

[20200407144543330.png]: https://img-blog.csdnimg.cn/20200407144543330.png