提前安装了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等安装的更多相关文章

  1. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM

    Nicolas Bevacqua进行了一个比较JavaScript构建(编绎)系统的任务.他对三巨头: Grunt, Gulp and NPM进行了比较,并讨论了每种的优缺点. By Nicolas ...

  2. gulp构建工具的安装

    第一步:node.js安装 在gulp安装之前,本机需要node环境.访问http://nodejs.org,然后点击大大的绿色的install按钮,下载完成后直接运行程序.npm会随着安装包一起安装 ...

  3. gulp自动化构建工具安装使用(1)

    我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...

  4. npm 全局安装和局部安装的区别

    上图是从网上找的webpack 安装的步骤,我们看到除了要全局安装之外,还需要本地安装,那么这两者有什么区别呢? 本文以Windows平台上做测试,以webpack为示例做教程 什么是全局安装? 安装 ...

  5. Nodejs 及 NPM 的安装

    Nodejs 及 NPM 的安装,有两种方式: 方式1.Nodejs 及 NPM  一起安装 https://nodejs.org/en/download/  下载  Windows Installe ...

  6. Windows环境下的NodeJS+NPM+Bower安装配置步骤

    Windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮 ...

  7. windows下的Nodejs及npm的安装、常用命令,Nodejs开发环境配置

    http://www.cnblogs.com/webstorm/p/5744942.html ***************************************** 第一步:下载Nodej ...

  8. [转] npm 模块安装机制简介

    npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...

  9. npm 模块安装机制简介

    npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...

随机推荐

  1. golang 中的引号

    前言 go中的单引号',双引号",反引号`,他们用法的区别. 需要先了解字符编码的区别,由来. 单引号 单引号里面只能有一个字符,一般只能用来包裹一个字节的ASCII码字符.他的类型是Gol ...

  2. Spark教程——(11)Spark程序local模式执行、cluster模式执行以及Oozie/Hue执行的设置方式

    本地执行Spark SQL程序: package com.fc //import common.util.{phoenixConnectMode, timeUtil} import org.apach ...

  3. 图解jvm--(三)类加载与字节码技术

    类加载与字节码技术 1.类文件结构 根据 JVM 规范,类文件结构如下 ClassFile { u4 magic; //魔数 u2 minor_version; //小版本号 u2 major_ver ...

  4. 《Interest Rate Risk Modeling》阅读笔记——第九章:关键利率久期和 VaR 分析

    目录 第九章:关键利率久期和 VaR 分析 思维导图 一些想法 有关现金流映射技术的推导 第九章:关键利率久期和 VaR 分析 思维导图 一些想法 在解关键方程的时候施加 \(L^1\) 约束也许可以 ...

  5. 【JAVA随摘笔记一】进制转换

    // 十进制转其它进制(二进制,八进制,十六进制) ; System.out.println(Integer.toBinaryString(k));// 转二进制 10001 System.out.p ...

  6. 二十 Spring的事务管理及其API&事务的传播行为,编程式&声明式(xml式&注解式,底层AOP),转账案例

    Spring提供两种事务方式:编程式和声明式(重点) 前者需要手写代码,后者通过配置实现. 事务的回顾: 事务:逻辑上的一组操作,组成这组事务的各个单元,要么全部成功,要么全部失败 事务的特性:ACI ...

  7. WebView使用详解(二)——WebViewClient与常用事件监听

      登录|注册     关闭 启舰 当乌龟有了梦想……       目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8 ...

  8. SQL Server DATEADD() 函数 一步步使用教程

    SQL Server DATEADD() 函数 DATEADD() 函数在日期中添加或减去指定的时间间隔. DATEADD(datepart,number,date)date 参数是合法的日期表达式. ...

  9. C# 篇基础知识5——委托和事件

    事件处理程序是基于“委托”机制运行的. 1.委托 (1)委托的定义和使用 有时需要将一个函数作为另一个函数的参数,这时就要用到委托(Delegate)机制.例如设计一个马戏表演函数: //定义委托 d ...

  10. netcore OA权限管理系统

    下载