这边将工作中使用的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的使用的更多相关文章

  1. npm以及gulp相关操作

    在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们 ...

  2. npm bower gulp

    npm即nodejs package manager ,是nodeJs的包管理工具,使用前需安装nodeJs(https://www.npmjs.com.cn/getting-started/inst ...

  3. Scss开发临时学习过程||webpack、npm、gulp配置

    SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...

  4. 第210天:node、nvm、npm和gulp的安装和使用详解

    一.node 1.什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行J ...

  5. 代码管理工具 (含git、npm、gulp)

    1 Git 分布式代码管理工具(基于Linux,可在本地进行提交)代码同时储存在本地和服务器中 ① Git基本操作命令 (1)初始化,创建初始化仓库 git init ------- 文件初始化,初始 ...

  6. Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件

    前言 本文介绍的是AspNetCore的MVC项目,WebApi+独立前端这种前后端分离的项目就不需要多此一举了~默认前端小伙伴是懂得使用前端工具链的. 为啥要用MVC这种服务端渲染技术呢? 简单项目 ...

  7. Django项目引入NPM和gulp管理前端资源

    前言 之前写了一篇<Asp-Net-Core开发笔记:使用NPM和gulp管理前端静态文件>,现在又来用Django开发项目了,之前我搞了一个Django的快速开发脚手架「DjangoSt ...

  8. node、npm、gulp、bower、ionic下载及安装

    node: http://nodejs.cn/ npm: 随node一起安装了 gulp: http://www.gulpjs.com.cn/docs/getting-started/ bower: ...

  9. 学习npm和gulp的一些资料,先记着明天接着学习

    Unix命令行程序和内建指令(百度百科) 将less编译成css的gulp插件 淘宝cnpm镜像 gulp教程之gulp-less gulp入门指南 查找npm的package.json的name配置 ...

随机推荐

  1. 【优化】bigpipe技术

    一.什么是bigpipe Bigpipe是Facebook工程师提出了一种新的页面加载技术. BigPipe是一个重新设计的基础动态网页服务体系.大体思路是,分解网页成叫做Pagelets的小块,然后 ...

  2. 【优化】如何检测移动端 CPU 以及内存占用率

    原文  http://taobaofed.org/blog/2015/12/04/cpu-allocation-profiler/ 前言 6 月底的时候淘宝众筹的 H5 接入到了支付宝钱包,上线前支付 ...

  3. 如何删除Eclipse里某个工作空间?

    很多时候,一个Eclipse中或多或少的都会有那么几个工作空间(workspace),但是久而久之你会发现有些工作空间你觉得不再需要了或者觉得碍眼,怎么办? 其实很简单,方法有两种. 1.打开你的Ec ...

  4. 【转】Spark源码分析之-scheduler模块

    原文地址:http://jerryshao.me/architecture/2013/04/21/Spark%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90%E4%B9%8B- ...

  5. 在商城系统中使用设计模式----简单工厂模式之在springboot中使用简单工厂模式

    1.前言: 不了解简单工厂模式请先移步:在商城中使用简单工厂.在这里主要是对springboot中使用简单工厂模式进行解析. 2.问题: 什么是简单工厂:它的实现方式是由一个工厂类根据传入的参数,动态 ...

  6. golang的并行快速排序

    .nums[]作为core,将nums中大于core的元素放入greater,将不大于core的元素放入less 当nums长度为1时往ch中写入此元素 .分别对less和greater进行1操作(并 ...

  7. 转载《浅析MVC框架中View层的优雅设计及实例》

    在基于B/S的应用程序开发中,从基本的技术分工上来说就是两大块,一是软件显示界面,另一个是程序逻辑.在N年前的脚本语言时代,无论是asp.php还是jsp,我们基本是都是把这两者柔和在一起的.尽管我们 ...

  8. C# 接口用法

    一.接口定义 接口是指一组函数成员而不实现它们的引用类型,只能由类和结构来是实现,接口的作用就不阐述了 二.声明接口 interface IMyInterface //interface 是关键字,后 ...

  9. 【VUE】vue项目开发中,setTimeout等定时器的管理。

    如果在一个组件中使用了定时器,当通过路由切换页面的时候 1.如果有同一个组件,定时器会叠加. 解决方案: computed:{ timer: { set (val) { this.$store.sta ...

  10. 图片切换(timer控件与ImagesList结合使用)

    private void Form3_Load(object sender, EventArgs e) { //打开窗体的时候显示第一张图片 this.pictureBox1.Image = this ...