npm与gulp的使用
这边将工作中使用的npm以及gulp的一些方法做了整理,方便以后查阅,至少不用去麻烦度娘了~
A.npm的使用:
1.在你所需要的文件夹里面初始化npm--> npm init -y --->会生成一个package.json文件
2.根据需要下载相应的文件--> npm install jquery --save 或者 npm install jquery --save-dev --->这两种做法都会在package.json文件里面生成一个当前文件的版本号,并且该指令还会生成一个node_modules文件夹,下载的文件放在文件夹中
B.gulp的使用:
1.将上述A中生成的package.json文件拷贝到当前文件夹下面,为的是下载package.json里面的文件
2.安装gulp,通过npm来安装 ---> npm install gulp-cli -g --->(g指的是全局的)
3.在当前项目中安装gulp ---> npm install gulp --save
4.在当前项目中新建一个文件 ---> gulpfile.js --->在这个文件里面写gulp指令
此时就可以使用了,在使用之间先将gulp里面的一些方法列举出来:1--> gulp.task("任务名称",function(){}); -->使用时: 在git里面敲上:gulp 任务名称
2--> gulp.src(['文件路径1','文件路径2']); -->当有多个路径时要用数组的形式传递参数
3--> gulp.dest('文件路径'); -->指定最终处理之后的文件的存放路径
4--> gulp.watch(); -->自动监视文件的变化,然后执行相应的任务
5.在执行前要下载相应的文件:1-- 对多个文件进行合并 -->npm install gulp-concat --save
2-- 对js文件进行压缩 -->npm install gulp-uglify --save
3-- 对css文件进行压缩 -->npm install gulp-cssnano --save
4-- 对html文件进行压缩 -->npm install gulp-htmlmin --save
6.举个栗子:
在该文件夹下有个js文件夹,里面有a.js 和 b.js,现在要将这两个合并且压缩到test文件夹下面的js文件夹中,即js/a.js,b.js ----> test/js/test.js
过程:
在git里面的操作:
npm install gulp-concat --save
npm install gulp-uglify --save
在gulpfile.js里面的操作:
var concat = require('gulp-concat')
var uglify = require('guulp-uglify')
gulp.task('script',function(){
gulp.src(['./js/a.js','./js/b.js'])-->合并之前的文件名称
.pipe(concat('test.js'))-->这边是合并之后的文件名称
.pipe(uglify())
.pipe(gulp.dest('test/js'))
})
在git里面的操作:
gulp script -->相当于执行上面的操作
下图相当于它的一个执行过程的比喻
npm与gulp的使用的更多相关文章
- npm以及gulp相关操作
在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们 ...
- npm bower gulp
npm即nodejs package manager ,是nodeJs的包管理工具,使用前需安装nodeJs(https://www.npmjs.com.cn/getting-started/inst ...
- Scss开发临时学习过程||webpack、npm、gulp配置
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...
- 第210天:node、nvm、npm和gulp的安装和使用详解
一.node 1.什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行J ...
- 代码管理工具 (含git、npm、gulp)
1 Git 分布式代码管理工具(基于Linux,可在本地进行提交)代码同时储存在本地和服务器中 ① Git基本操作命令 (1)初始化,创建初始化仓库 git init ------- 文件初始化,初始 ...
- Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件
前言 本文介绍的是AspNetCore的MVC项目,WebApi+独立前端这种前后端分离的项目就不需要多此一举了~默认前端小伙伴是懂得使用前端工具链的. 为啥要用MVC这种服务端渲染技术呢? 简单项目 ...
- Django项目引入NPM和gulp管理前端资源
前言 之前写了一篇<Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件>,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoSt ...
- node、npm、gulp、bower、ionic下载及安装
node: http://nodejs.cn/ npm: 随node一起安装了 gulp: http://www.gulpjs.com.cn/docs/getting-started/ bower: ...
- 学习npm和gulp的一些资料,先记着明天接着学习
Unix命令行程序和内建指令(百度百科) 将less编译成css的gulp插件 淘宝cnpm镜像 gulp教程之gulp-less gulp入门指南 查找npm的package.json的name配置 ...
随机推荐
- SpringMVC+AJAX+JSON
在做一个ajax发送json到springmvc的控制层,控制层的对象中有一个List集合,ajax调用总是报415错误.发现了一个一直没有注意到的问题,借机记录一下. (细节部分都忽略了,在最后的d ...
- Eclipse删除switch workspace下多余的workspace
第一步:修改org.eclipse.ui.ide.prefs 文件 打开Eclipse目录的\configuration\.settings目录,找到org.eclipse.ui.ide.prefs ...
- Android 开发工具类 10_Toast 统一管理类
Toast 统一管理类: 1.短时间显示Toast: 2.长时间显示 Toast: 3.自定义显示 Toast 时间. import android.content.Context; import a ...
- 面试题27:单链表向右旋转k个节点
Given a list, rotate the list to the right by kplaces, where k is non-negative. For example:Given1-& ...
- double类型转换为int类型四舍五入工具类
package com.qiyuan.util; import java.math.BigDecimal; import java.text.DecimalFormat; public class G ...
- nginx 学习笔记(3) nginx管理
nginx可以通过向其发送信号来进行管理.默认情况下主进程的进程ID写到文件/usr/local/nginx/logs/nginx.pid中.当然也可以在配置文件中自定义该pid文件,自定义使用pid ...
- Ubuntu18.0.4查看显示器型号
在官网https://launchpad.net/ubuntu/+source/xresprobe下载二进制包,apt-get目前无法安装xresprobe 输入命令sudo ddcprobe 得到如 ...
- Week6&7——第一次项目冲刺(Alpha版本)
Deadline: 2017-11-11 10:00PM,以博客发表日期为准. 评分基准: 按时交 - 有分(需求&原型改进与系统设计-10分,敏捷冲刺-70分),检查的项目包括后文的三个方面 ...
- lua热更框架之XLua
框架介绍 xLua是当下最流行的unity热更方案之一,作者是腾讯的车雄生前辈,自2016年初推出以来,已经在腾讯的多款游戏项目上应用,目前xLua已经开源到了GitHub.xLua最大的特色是不仅支 ...
- C#:ORM--实体框架EF(entity framework)(1)
本文来自:http://www.cnblogs.com/xuf22/articles/5513283.html 一.什么是ORM ORM(Object-relational mapping),中文翻译 ...