npm和gulp学习
npm的使用
node
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,是一种JavaScript语言运行平台,和浏览器这个运行平台是同一个概念。
npm
- npm平台包管理工具(Node Package Manager):通过一套命令统一管理常用的类库。平时用npm下载jquery、bootstrap、angular等插件、库或框架。
npm的安装
- node.js官网下载:https://nodejs.org/en/
安装完成后,shift+鼠标右键,选择在此窗口打开命令行,验证版本看是否安装OK。
node -vnpm -v
初始化
在相应文件夹内shift+鼠标右键,选择在此处打开命令窗口
npm init
一直Enter键,最后会生成package.json文件
下载包
npm属于国外网站,下载速度可能比较慢,加上淘宝镜像速度会快些
淘宝镜像:--registry=https://registry.npm.taobao.org
npm install jquery //当前目录下安装npm install jquery --save //下载之后会在package.json中生成当前下载的包的版本信息npm install jquery -g //全局安装npm install jquery@version //在当前目录安装指定版本的包npm uninstall jquery //删除当前目录下的包
一般使用第二行代码下载,因为下载之后会在package.json中生成当前下载的包的版本信息,若是得到的是带版本信息的package.json,只用执行npm install
就会把所有的包下载。
gulp的使用
官网
Gupl官网:http://www.gulpjs.com
Gulp 中文网:http://www.gulpjs.com.cn
Gulp 插件下载:https://www.npmjs.com/
gulp是什么
- gulp是前端开发过程中对代码进行自动化构建的工具。它不仅能对资源进行优化,而且在开发过程中能够通过配置自动完成很多重复的任务,让我们可以专注于代码,提高工作效率
gulp的使用
5个核心方法
- gulp.task('任务名',function(){}) // 创建任务。
- gulp.src('./*.css') 指定想要处理的文件。
- gulp.dest() // 指定最终处理后的文件的存放路径。
- gulp.watch() // 自动的监视文件的变化,然后执行相应任务。
- gulp.run('任务名'),直接执行相应的任务。
基本使用
1. 全局安装gulp
npm install --global gulp //全局安装 默认安装路径C:\Users\Administrator\AppData\Roaming\npm\node_modules
2. 局部安装gulp以及相关依赖(devDependencies)
npm install --save-dev gulp
3. 根目录新建一个gulpfile.js
,在内部引入gulp
var gulp = require('gulp')
4. 创建任务
gulp.task('taskName',function(){console.log(‘runing task’);})
5. 在命令行中执行任务
gulp.task('test',function(){console.log(‘runing task’);})gulp test //若任务名是default 则只用执行gulp
使用gulp-concat
合并js文件
安装合并代码插件
gulp-concat
npm install gulp-concat
引用
gulp-concat
var concat = require( 'gulp-concat' );
书写合并代码
gulp.task( 'cat', function () {// gulp.src( './js/*.js' ) // 合并js文件夹下的所有js文件// 按顺序合并指定js文件gulp.src( [ './js/Itcast.core.js','./js/Itcast.ctor.js','./js/Itcast.dom.js','./js/Itcast.event.js','./js/Itcast.style.js','./js/Itcast.attr.js' ] )// 使用 gulp-concat 合并.pipe( concat( 'bundle.js' ) )// 最后将处理好的文件保存在 dist 文件夹下.pipe( gulp.dest( './dist' ) );} );
使用gulp-uglify
压缩js代码
安装
gulp-uglify
npm install gulp-uglify
引用
gulp-uglify
var press = require( 'gulp-uglify' );
书写压缩代码
gulp.task( 'press', function () {// 指定需要被压缩的文件gulp.src( './dist/*.js' )// 使用press方法压缩.pipe( press() )// 输出到指定目录.pipe( gulp.dest( './output' ) );} );
对css进行合并压缩操作
npm install gulp-cssnano --save// 新建一个任务,对css进行处理ulp.task('style', function(){// 对项目中的2个css文件进行合并,压缩操作// 1.匹配到要处理的文件ulp.src(['./*.css'])// 2.合并文件pipe(concat('index.css'))// 3.压缩操作pipe(cssnano())// 4.输出到指定目录pipe(gulp.dest('./dist'))})
对html进行合并压缩
npm install gulp-htmlmin --save// 新建一个任务,对html进行压缩gulp.task('html', function(){// 1.匹配到要处理的文件gulp.src(['./index.html'])// 2.压缩操作.pipe(htmlmin({collapseWhitespace:true}))// 3.指定输出目录.pipe(gulp.dest('./dist'))})
gulp.watch
- 监视文件的变化,然后执行相应的任务
gulp.run, 直接执行指定的任务
// gulp.watch 监视文件变化,执行相应任务gulp.task('mywatch', function(){// 执行指定的任务gulp.run('script')// 1.监视js文件的变化,然后执行script任务// 第一个参数:要监视的文件的规则// 第二个参数:是要执行的任务gulp.watch(['./app.js','sign.js'],['script'])})
执行多个任务
var gulp = require( 'gulp' );var concat = require( 'gulp-concat' );var press = require( 'gulp-uglify' );gulp.task( 'concat', function () {gulp.src( [ './js/Itcast.core.js','./js/Itcast.ctor.js','./js/Itcast.dom.js','./js/Itcast.event.js','./js/Itcast.style.js','./js/Itcast.attr.js' ] ).pipe( concat( 'Itcast.js' ) ).pipe( gulp.dest( './dist' ) );} );gulp.task( 'concatPress', function () {return gulp.src( [ './js/Itcast.core.js','./js/Itcast.ctor.js','./js/Itcast.dom.js','./js/Itcast.event.js','./js/Itcast.style.js','./js/Itcast.attr.js' ] ).pipe( concat( 'Itcast.min.js' ) ).pipe( gulp.dest( './dist' ) );} );gulp.task( 'default', [ 'concat', 'concatPress' ], function () {gulp.src( './dist/Itcast.min.js' ).pipe( press() ).pipe( gulp.dest( './dist' ) );} );
转载于:https://www.cnblogs.com/Jerry-MrNi/p/6844409.html
npm和gulp学习相关推荐
- npm以及gulp相关操作
在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们 ...
- 代码管理工具 (含git、npm、gulp)
1 Git 分布式代码管理工具(基于Linux,可在本地进行提交)代码同时储存在本地和服务器中 ① Git基本操作命令 (1)初始化,创建初始化仓库 git init ------- 文件初始化,初始 ...
- gulp学习笔记,基本使用流程,基本函数,使用监听、插件
学习gulp的简单笔记.原教学视频:https://www.bilibili.com/video/BV1NE411T7Z2?p=396. gulp基本使用流程 初始化项目目录: cnpm init / ...
- npm常用命令学习(npm install -D,semver版本规范, npm进行版本管理的最佳实践用法)...
什么是npm npm有两层含义.一层含义是Node的开放式模块登记和管理系统,网址为npmjs.org.另一层含义是Node默认的模块管理器,是一个命令行下的软件,用来安装和管理Node模块. npm ...
- 全网最全面的npm包管理学习
包管理工具概述 本门博客的前置知识:JavaScript.ES6.模块化.git 本门博客的所有代码均书写在 nodejs 环境中,不涉及浏览器环境 概念 模块(module) 通常以单个文件形式存在 ...
- gulp + webpack + sass 学习
笔记: 1. new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成 ...
- 前端构建工具Gulp的学习和使用
前几天刚鼓捣了Grunt的使用,结果文档还没捂热,老大说我们还是用gulp吧,搞得我又得来整gulp,眼泪流成河了,真是不晓得底层人民的辛苦啊.不过经过对gulp的学习,发现很好用,比grunt舒服! ...
- 在VSCode终端中安装Gulp包出现 * package is looking for funding run `npm fund..和无法加载文件,在此系统上禁止运行脚本的错误提示一步到位解决
刚刚在学习Gulp工具的时候,在VSCode中使用终端安装包却出现以下错误提示: 错误提示1: high severity vulnerabilities To address issues that ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
最新文章
- Apache Camel框架入门示例
- matlab 图像平滑的算法_图像相似度---灰度分布算法---用matlab实现
- 成功解决pandas读取文件中不读取第一索引列
- H5开发开发利器——flex
- 提高雅思听力速度必须反复练耳朵别无捷径
- Git多人协作工作流程
- 数字图像处理知识总结
- 网游服务器端设计思考:心跳设计
- d3代码如何改造成update结构(恰当处理enter和exit)
- 用自己的ID在appstore中更新app-黑苹果之路
- Linux忘记 root密码的解决办法
- 2021.9.11周六PAT甲级考试复盘与总结
- java heap space 解决方法_内存溢出错误:java堆空间
- bing翻译api php,Auto Tag Slug使用 google翻译并删除bing api key提示
- FIR滤波器和IIR滤波器
- @submit.native.prevent的作用?
- 解决 ‘@‘ that cannot start any token. (Do not use @ for indentation)
- jsp值choose标签
- PageOffice——动态填充Word模板并在线编辑
- 用户文件下载服务解决方案
热门文章
- 深入浅出交换类排序算法(转)
- linux在线聊天报告,EChat: Linux下基于命令行的在线聊天系统
- python socket send_全网最详细python中socket套接字send与sendall的区别
- java构建二叉树_java实现二叉树的构建以及3种遍历方法
- 村长叫你领书过年,送3本Python好书
- 备战2020年双十一,刷喵币靠这一个自动化脚本就够了!
- 数据:以太坊上稳定币流通量突破600亿美元,年内增幅达187%
- Unity 叉乘 vector3 四元数 和声音组件
- ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存
- PyTorch深度学习:60分钟入门(Translation)