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 ...
随机推荐
- 并发编程之Event事件
Event事件 用来同步线程之间的状态. 举个例子: 你把一个任务丢到了子线程中,这个任务将异步执行.如何获取到这个任务的执行状态 解决方法: 如果是拿到执行结果 我们可以采用异步回调, 在这里我 ...
- 十三 Struts2复杂类型的数据封装,List封装和Map封装
在实际开发当中,有可能遇到批量向数据库中插入记录,需要在页面中将数据封装到集合中.类似页面表达式方法 List封装: 前端JSP: <%@ page language="java&qu ...
- CSS概述(最详细!!!)
一.先综述 二.分述: 1.简介: 2.基本用法 3.引入方式: 4.盒模型 5.选择器: 6.常见文本样式及复合样式 7.改变行.块元素的属性: 8.标签显示与隐藏: ...
- idea中scala语言自动补全变量的同时,也自动补全类型
IDE是IDEA,scala中,在new一个对象时,通过快捷键ctrl + Alt + V自动补全变量,但是我还想自动补全变量的类型,就像图中所示,在Specify type前面自动帮你打勾. 可以按 ...
- 【PAT甲级】1013 Battle Over Cities (25 分)(并查集,简单联通图)
题意: 输入三个整数N,M,K(N<=1000,第四个数据1e5<=M<=1e6).有1~N个城市,M条高速公路,K次询问,每次询问输入一个被敌军占领的城市,所有和该城市相连的高速公 ...
- C++中的四种类型转换运算符static_cast、dynamic_cast、const_cast和reinterpret_cast的使用
1.上一遍讲述了C语言的隐式类型转换和显示类型转换,C语言之所以增加强制类型转换,就是为了强调转换的风险性,但这种强调风险的方式是比较粗放了,粒度比较大,它并没有表明存在什么风险,风险程度如何. 2. ...
- 使用gitthub 创建项目搭建博客
最近在学Andrew Ng 的机器学习,做了上买那个的练习题和变成作业,想着把自己做的编程作业放到GitHub,方便讨论,虽然之前注册了GitHub,但这两年整天在毕设方向的事,做的身心俱疲,再加上自 ...
- Python之第一次自夸
有一个好玩的代码 import win32com.client g = win32com.client.Dispatch("SAPI.SPVOICE") g.Speak(" ...
- Android开发_*.R文件无法自动生成
问题描述: 今天是我决定专注Android开发的第一天,我在网上下载了一个数独游戏的源码,准备开始着手学习.在导入之后出现Java文件中import *.R文件报错,在gen目 ...
- PromQL操作符
PromQL操作符 使用PromQL除了能够方便的按照查询和过滤时间序列以外,PromQL还支持丰富的操作符,用户可以使用这些操作符对进一步的对事件序列进行二次加工.这些操作符包括:数学运算符,逻辑运 ...