美文网首页
前端构建工具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

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