gulp和npm等安装
提前安装了node.js,
https://nodejs.org/zh-cn/download/
跟着提示安装就行,然后执行一下命令cdm看下版本号如下图就说明安装成功了
安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。
1.打开命令行窗口,输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
获取到cnpm以后,输入下面的命令,都用cnpm不需要用$ npm;
cnpm install -g gulp //全局安装
cnpm install --save-dev gulp //本地安装,只是开发版的依赖
cnpm install --save-dev browser-sync
browser-sync是一个十分好用的浏览器同步测试工具。
// 载入插件
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),//浏览器刷新工具
imagemin = require('gulp-imagemin'),//图片压缩
tinypng = require('gulp-tinypng-nokey');//tinypng图片压缩
minifycss = require('gulp-minify-css'),//css压缩
uglify = require('gulp-uglify'),//js压缩
jshint = require('gulp-jshint'),//js语法检测
rename = require('gulp-rename'),//重命名
gclean = require('gulp-clean'),//清除文件
minimist = require('minimist'),//截取传参
cache = require('gulp-cache'),//获取文件cache
fileinclude = require('gulp-file-include');//静态资源引用
若出现这样的问题:
则继续安装:
cnpm install gulp-imagemin
本地安装,模块化显示
gulp实现公共html代码复用
gulpfile.js文件
var gulp = require('gulp');
var fileinclude = require('gulp-file-include'); gulp.task('fileinclude', function () {
gulp.src('src/pages/**/*.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});
执行gulp fileinclude 命令
文件创建如图:
注意:访问不是打开page里面的index.html,要不然会出现如下图这样:
而是生成出来的dist文件夹里的index.html
测试了一下:
卸载可以用npm uninstall gulp
uniapp运行打包需要node_modules时,
运行执行命令cmd:npm install就可以了
就可以生成这个文件了。
升级npm执行命令:npm install npm -g
gulp和npm等安装的更多相关文章
- JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
Nicolas Bevacqua进行了一个比较JavaScript构建(编绎)系统的任务.他对三巨头: Grunt, Gulp and NPM进行了比较,并讨论了每种的优缺点. By Nicolas ...
- gulp构建工具的安装
第一步:node.js安装 在gulp安装之前,本机需要node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序.npm会随着安装包一起安装 ...
- gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- npm 全局安装和局部安装的区别
上图是从网上找的webpack 安装的步骤,我们看到除了要全局安装之外,还需要本地安装,那么这两者有什么区别呢? 本文以Windows平台上做测试,以webpack为示例做教程 什么是全局安装? 安装 ...
- Nodejs 及 NPM 的安装
Nodejs 及 NPM 的安装,有两种方式: 方式1.Nodejs 及 NPM 一起安装 https://nodejs.org/en/download/ 下载 Windows Installe ...
- Windows环境下的NodeJS+NPM+Bower安装配置步骤
Windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮 ...
- windows下的Nodejs及npm的安装、常用命令,Nodejs开发环境配置
http://www.cnblogs.com/webstorm/p/5744942.html ***************************************** 第一步:下载Nodej ...
- [转] npm 模块安装机制简介
npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...
- npm 模块安装机制简介
npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...
随机推荐
- 吴裕雄--天生自然PYTHON爬虫:爬取某一大型电商网站的商品数据(效率优化以及代码容错处理)
这篇博文主要是对我的这篇https://www.cnblogs.com/tszr/p/12198054.html爬虫效率的优化,目的是为了提高爬虫效率. 可以根据出发地同时调用多个CPU,每个CPU运 ...
- eclipse 快速隐藏所有方法的代码块
java开发中往往一个class文件中会有很多方法,一个方法的实现代码有时候特别长 我个人就喜欢把无关的方法代码全部隐藏起来,只打开当前需要编辑的代码就行了(不喜欢看导航视图,容易头晕) Ctrl+s ...
- springboot RESTful Web Service
参考:http://spring.io/guides/gs/rest-service-cors/
- Python中的进制表示方式及转换方法
在Python中,非十进制数字的表示方式为: 二进制:前面加0b,如0b1001 八进制:前面加0o,如0o3562 十六进制:前面加0x,如0x2af3 不同进制数字可直接进行数学计算,结果返回十进 ...
- 我的学习经历——Linux系统入门教程
我想把最近学习Linux的经验和过程分析出来,当时是在上大三,是学生一枚,以前对开源也没有什么特殊的认识,只觉得很高深,不明觉厉的东西,在当时因为学校要参加职业技能大赛,其中有一团体性质的比赛,几个同 ...
- ‘.vue’文件(非常重要)
‘.vue’文件 Vue自定义了一种后缀名名字为.vue文件,它将html, js, css 整合成一个文件,和里面 template script style三个区别分别依次对应. 1 2 3 4 ...
- FFmpeg——AVFrame中 的 data
AVFrame中 的 data 的定义如下: typedef struct AVFrame { #define AV_NUM_DATA_POINTERS 8 /** * pointer to the ...
- 「CF1023F」Mobile Phone Network
「CF1023F」Mobile Phone Network 传送门 直接钦定那 \(k\) 条边在最小生成树中,然后把最小生成树树剖一下. 每条其它边的效果就是把该边端点路径上的边的权对该边边权取 \ ...
- Android LowMemoryKiller原理分析
copy from : http://gityuan.com/2016/09/17/android-lowmemorykiller/ frameworks/base/services/core/jav ...
- 2_02_MSSQL课程_where查询和like模糊查询
1.where 条件过滤 常见的表达式过滤:比如: select * from 表 where Id>10; 多条件过滤: and or not (优先级:not > and > ...