1.win+r:进入cdm

2.node -v:查询是否安装node
3.npm install -g gulp:安装gulp
4.gulp -v:查看是否安装gulp
5.cd desk:进入桌面
6.cd 20170410:进入文件夹
7.npm init:对文件夹进行重置
8.一些描述,可写可不写:
9.npm install gulp --save-dev:将gulp安装到项目中:
 10.安装多个模块:
 11.npm install gulp-uglify --save-dev:压缩js文件需要安装的模块
12.在根目录文件下新建一个gulpfile.js文件 
 13.引入模块信息
  1. //实现压缩js文件
  2. var gulp = require("gulp");
  3. //实现压缩js文件模块
  4. var uglify = require("gulp-uglify");
  5. var concat = require('gulp-concat');
  6. var open = require('gulp-open');
  7. var connect = require('gulp-connect');
14.创建任务
  1. gulp.task('js', function() {
  2. //1.找到源代码
  3. //*.js:所有的js文件
  4. //.src()找源码路径
  5. gulp.src("src/js/*.js")
  6. .pipe(uglify())//2.进行压缩代码
  7. .pipe(concat('all.js'))//2.5进行合并
  8. .pipe(gulp.dest("./dist/js"))//3.将压缩文件输出
  9. .pipe(connect.reload())//4.检测修改时页面刷新
  10. });
15.添加open模块默认打开浏览器的地址(uri::打开地址)
  1. // uri:打开的地址
  2. gulp.task('open', function(){
  3. gulp.src('src/*.html')
  4. .pipe(open({uri:'http://localhost:8088'}));
  5. });
16.检测是否被修改
  1. gulp.task("auto",function(){
  2. //监听文件修改
  3. gulp.watch('src/js/*.js',['js'])
  4. gulp.watch('src/*.html',['html'])
  5. gulp.watch('src/css/*.css',['css'])
  6. });
17.设置gulp的默认任务
  1. // 设置gulp的默认任务
  2. gulp.task('default', ['connect','open', 'auto','js','html','css']);
18.运行成功:
 

基于node安装gulp-一些命令的更多相关文章

  1. 基于node和npm的命令行工具——tive-cli

    前端开发过程中经常会用到各种各样的脚手架工具.npm全局工具包等命令行工具,如:Vue脚手架@vue/cli.React脚手架create-react-app.node进程守卫工具pm2.本地静态服务 ...

  2. gulp入坑系列(1)——安装gulp

    前言   好吧,我承认我是为了搞定Sass编译CSS文件的问题,迷一样的着手入gulp的坑,sass和gulp的爬坑历程大概会一起更新.然后感觉这里windows和mac的流程差不多,不过mac的通常 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 安装 Node 和 gulp

    gulp 是基于 node 实现的,那么我们就需要先安装 node. Node 是一个基于Chrome JavaScript V8引擎建立的一个平台,可以利用它实现 Web服务,做类似PHP的事. 打 ...

  5. 基于node.js的压缩合并安装

    1.构建工具(grunt,gulp) 下载地址:http://gruntjs.cn/http://gruntjs.com/ (1)安装nodejs(http://www.nodejs.org/) 验证 ...

  6. Node.js gulp安装与使用出现问题与解决

    此前使用了最新的4.0之后的gulp版本,出现了一系列的问题. 于是想换回3.9版本 (一)本地与全局都需要安装gulp ①首先卸载原来版本 npm uninstall gulp ②本地与全局分别安装 ...

  7. windows平台下node,npm,gulp配置

    参考文献:http://blog.csdn.net/yuanyuan214365/article/details/53749583 1.安装nodejs:nodejs nodejs安装路径随意 nod ...

  8. npm(cnpm)介绍(安装gulp)

    1.npm(node package manager) nodejs的包管理器,用于node插件管理(安装.卸载.更新.管理依赖等); 2.使用npm安装安装插件: 1).命令提示符执行 npm in ...

  9. 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具

    认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...

随机推荐

  1. HTML5 SSE 数据推送应用开发

    javascript表达行为,css表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...

  2. SpringMVC常用方法大全

    ---恢复内容开始--- web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app x ...

  3. 使用textarea标签代替input标签可以实现输入框的大小调节,自动换行,滚动条显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C语言 一些算法

    1,斐波那契数列 ①递归 时间复杂度O(2^n)#include <stdio.h> int fib(int n){ ||n==) ; ) + fib(n-); } int main(){ ...

  5. 【vue】——使用watch 观察路由变化,重新获取内容

    更新:11-29 时隔半年,又重新使用VUE进行开发,有了新方案--beforeRouteLeave 在组件内直接使用,前提是你用了vue-router: beforeRouteLeave (to, ...

  6. 人工鱼群算法超详细解析附带JAVA代码

    01 前言 本着学习的心态,还是想把这个算法写一写,给大家科普一下的吧. 02 人工鱼群算法 2.1 定义 人工鱼群算法为山东大学副教授李晓磊2002年从鱼找寻食物的现象中表现的种种移动寻觅特点中得到 ...

  7. c++之随堂笔记

    1.指针篇 给指针赋值时,只能等号右边只能使用&符号将一个对象的地址赋值给指针,不能直接把一个具体的数或者字符串直接赋值给指针. 举例: int* ptr_num = 100;  //这种写法 ...

  8. Java方法区

    方法区 在一个jvm实例的内部,类型信息被存储在一个称为方法区的内存逻辑区中.类型信息是由类加载器在类加载时从类文件中提取出来的.类(静态)变量也存储在方法区中. jvm实现的设计者决定了类型信息的内 ...

  9. leetcode-849-到最近的人的最大距离

    题目描述: 在一排座位( seats)中,1 代表有人坐在座位上,0 代表座位上是空的. 至少有一个空座位,且至少有一人坐在座位上. 亚历克斯希望坐在一个能够使他与离他最近的人之间的距离达到最大化的座 ...

  10. mfix输出自定义数据

    有时候需要输出一些自定义的网格或者DEM颗粒信息,比如输出颗粒的受力,这里举例颗粒自定义数据的输出.网格自定义输出方法类似. 首先用FileLocatorPro(网上很多绿色版),搜索一下代码里mod ...