实际项目就是一个单页面。因此,我觉得用gulp足够,并且不需要webpack和vue-cli因为没有必要使用组件。

先来说一下项目结构

1.

然后来看看我的包管理package.json都用了啥,你也可以复制下来,npm install进行安装就行了。

{
"name": "webRoot",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.3.0",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.3.2",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^3.0.0",
"imagemin-pngcrush": "^5.1.0",
"jshint": "^2.9.5"
}
}

  然后是我的gulpfile.js配置

这里还是用图片吧,动手敲一敲总还是好的,给以后的自己也找点麻烦。

  

内容不多,但是很实用,所以我不会放弃治疗哒。

gulp配合vue压缩代码格式化的更多相关文章

  1. 在vscode中使用eslint+prettier格式化vue项目代码 (转载)

    ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...

  2. vsCode 设置vue 保存自动格式化代码

    setting { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tab ...

  3. HTML/CSS/Javascript代码在线压缩、格式化(美化)工具

    CSS 格式化 ProCSSor - http://procssor.com/   CSS 压缩 CSS Compressor - http://www.cssdrive.com/index.php/ ...

  4. gulp做的前端代码压缩报错,揭示具体错误 信息

    用gulp做的前端代码压缩,今天在打包的时候发现打包出错了.报的错误是--unable to minify JavaScript.但是至于为什么会不能打包,表示很困惑,然后通过一番搜索,最后得出了问题 ...

  5. vs code中Vue代码格式化的问题

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vu ...

  6. vs Code + Eslint + Prettier 代码格式化(vue开发)

    一.什么是Eslint 通过查看eslint官网(官网传送门),我们就可以知道,eslint就是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,主要用来检 ...

  7. vue.js - 解决vue-cli打包后自动压缩代码

    一.webpack中引入的压缩代码 /build/webpack.prod.conf.js const OptimizeCSSPlugin = require('optimize-css-assets ...

  8. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  9. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

随机推荐

  1. openstack安装问题

    KeyStone NoHandlers Errorroot@openstack-dev-r910:/home/brent/openstack# ./keystone_data.shNo handler ...

  2. acm1217教训

    能用容器去做的用容器做,尽量少用数组,即使自己明确其数量的上届: #include<iostream> #include<cstring> #include<map> ...

  3. 使用Android Studio调试UiAutomator过程中遇到的问题

    声明: 这里纪录了个人学习和使用Android Studio调试UiAutomator过程中遇到遇到的问题,不定时进行更新,欢迎一起交流学习 1.Excution faild for task ‘:a ...

  4. SoC时钟系统简介

    1.SoC的时钟获得一般有: * 外部直接输入时钟信号,SoC有个引脚用来输入外部时钟信号,用的很少. * 外部晶振+内部时钟发生器产生时钟,大部分低频单片机都是这么工作的. * 外部晶振+内部时钟发 ...

  5. Java注释@interface的用法【转】 --好文章 很好理解

    java用  @interface Annotation{ } 定义一个注解 @Annotation,一个注解是一个类. @Override,@Deprecated,@SuppressWarnings ...

  6. [洛谷P2577] [ZJOI2005]午餐

    洛谷题目链接:[ZJOI2005]午餐 题目描述 上午的训练结束了,THU ACM小组集体去吃午餐,他们一行N人来到了著名的十食堂.这里有两个打饭的窗口,每个窗口同一时刻只能给一个人打饭.由于每个人的 ...

  7. [洛谷P2023] [AHOI2009]维护序列

    洛谷题目链接:[AHOI2009]维护序列 题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,-,aN .有如下三种操作形式: (1)把数列 ...

  8. String.replaceAll()方法替换字符串中的反斜杠(\)

    replaceAll()方法实际是采用正则表达式的规则去匹配的. 在regex中"\\"表示一个"\",在java中一个"\"也要用&quo ...

  9. 【51NOD】数字1的数量

    [算法]数位DP [题解]数位dp总结 之 从入门到模板 #include<cstdio> #include<algorithm> #include<cstring> ...

  10. Jquery checkbox 遍历

    checkbox 全选\全部取消 $("#ChkAll").click(function(){    $("#divContent input[type='checkbo ...