美文网首页
前端构建工具gulp打包LayuiAdmin

前端构建工具gulp打包LayuiAdmin

作者: Boston199834 | 来源:发表于2019-06-12 17:39 被阅读0次

1:安装node.js 安装方式:https://www.runoob.com/nodejs/nodejs-install-setup.html

安装完后打开cmd, 输入:node -v

查看安装结果

2:安装淘宝镜像(npm太慢,改用淘宝镜像下载速度更快,之后安装命令改为cnpm)

npm install -g cnpm --registry=https://registry.npm.taobao.org

3:全局安装gulp

cnpm install --global gulp

如果没有全局安装在打包的时会出现以下情况,当然可以修改环境变量解决(更复杂)

运行gulp命令

4:进入我们的layui后台管理项目,已经存在gulpfile.js和package.json,不需要进行添加了,或者自行添加也行(方式:想创建package.json ,运行 cnpm init, 不过这种方式添加的依赖会很多,我们只需要gulp打包的即可)

package.json package.json内容

5:在项目中安装gulp

cnpm install --save-dev gulp

node_modules依赖库

安装完后项目会出现一个node_modules文件夹(里面都是第三方依赖库)

6:打包项目,直接在控制台运行 gulp 即可,如过报错如下

缺少依赖库

报错提示说没有安装gulp-minify-css 模块我们只需要在控制台输入:cnpm install gulp-minify-css --save-dev,在当前项目安装这个模块

直到打包成功提示如下:

打包成功

注:部署的时候将start下面的index.html文件改为注释的内容即可,同时之后部署的时候仅需要上传dist文件夹,src不需要上传

start中index.html修改

相关文章

  • 前端构建工具gulp打包LayuiAdmin

    1:安装node.js 安装方式:https://www.runoob.com/nodejs/nodejs-i...

  • Webpack 打包工具

    webpack 现代化前端最流行的一款 构建打包工具 前端构建打包工具的发展历史 grunt gulp fis w...

  • gulp && webpack

    gulp 前端自动化构建工具,此类的工具还有gruntwebpack 前端打包工具,打包:分析项目所依赖的内容,自...

  • 相关文章记录

    1.gulp构建工具相关信息 前端自动化构建工具gulp记录Gulp.js-livereload 不用F5了,实时...

  • JavaScript学习笔记(三十六)-- GULP

    GULP gulp 是一个项目开发的 自动化打包构建工具 基于 node 环境来运行的 什么是自动化打包构建工具 ...

  • gulp入门教程

    gulp是前端的自动化构建工具,gulp的出现是希望能取代grunt,成为最流行的前端自动化构建工具,它与grun...

  • 有哪些必看的前端 JS 库?

    前端自动化 前端构建工具 gulp – The streaming build system grunt – th...

  • gulp资源整理

    Gulp官网 Gulp中文网 Gulp插件网 博客: 前端构建工具gulpjs的使用介绍及技巧 - 无双 gulp...

  • 业务开发流程理解

    1 技术选型 1)构建工具 1、 构建工具有哪些 gulp:任务管理,不能做打包,对任务文件操作过程中,gulp是...

  • vue+node环境搭建

    · webpack:代码模块化构建打包工具· gulp: 基于流的自动化构建工具· grunt: Javascri...

网友评论

      本文标题:前端构建工具gulp打包LayuiAdmin

      本文链接:https://www.haomeiwen.com/subject/bkfrfctx.html