npm的使用

node

  • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,是一种JavaScript语言运行平台,和浏览器这个运行平台是同一个概念。

npm

  • npm平台包管理工具(Node Package Manager):通过一套命令统一管理常用的类库。平时用npm下载jquery、bootstrap、angular等插件、库或框架。

npm的安装

初始化

在相应文件夹内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文件

  1. 安装合并代码插件gulp-concat

     npm install gulp-concat
  2. 引用gulp-concat

     var concat = require( 'gulp-concat' );
  3. 书写合并代码

     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代码

  1. 安装gulp-uglify

     npm install gulp-uglify
  2. 引用gulp-uglify

     var press = require( 'gulp-uglify' );
  3. 书写压缩代码

     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' ) );
} );

npm和gulp学习的更多相关文章

  1. npm和gulp学习笔记

    原文链接:[gulpfile.js文件常见配置]

  2. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  3. gulp学习笔记1

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...

  4. gulp学习笔记2

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...

  5. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  6. Gulp 学习总结

    Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS.  http://nodejs.org/download/ 安装 ...

  7. gulp 学习笔记

    以这次学习gulp为契机来同时了解和学习node相关的知识和概念,比如 npm,package.json等,为以后学习node打好基础. 目录   npm     查看模块     安装模块      ...

  8. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  9. gulp学习-metamask前端使用

    https://www.gulpjs.com.cn/docs/getting-started/ ,这个是3.9.0版本 后面发现安装的版本是4.0.0,看下面这个: https://github.co ...

随机推荐

  1. bzoj2243【SDOI2011】染色

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MB Submit: 4537  Solved: 1702 [id=2243" ...

  2. ios17--自定义控件2改进

    控制器: // // XMGViewController.h #import <UIKit/UIKit.h> @interface XMGViewController : UIViewCo ...

  3. Linux音频驱动-ALSA概述

    概述 ALSA(Advanced Linux Sound Architecture)是linux上主流的音频结构,在没有出现ALSA架构之前,一直使用的是OSS(Open Sound System)音 ...

  4. python pass 的用法

    python pass用法 1.空语句 do nothing 2.保证格式完整 3.保证语义完整 4.以if语句为例: C/C++中写法: if(true) ; // do nothing else ...

  5. Codeforces Round #239 (Div. 1)

    B. Long Path time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  6. TextMeshPro 图片字Sprite

      生成 需要一个资源  右键生成 调整位置  放在目录  使用 <sprite="NumDamage" index=1><sprite="NumDam ...

  7. java 锁机制(synchronized 与 Lock)

    在java中,解决同步问题,很多时候都会使用到synchronized和Lock,这两者都是在多线程并发时候常使用的锁机制. synchronized是java中的一个关键字,也就是说是java内置的 ...

  8. ACM_最短网络(最小生成树)

    Problem Description: Farmer John has been elected mayor of his town! One of his campaign promises wa ...

  9. 【LeetCode】467. Unique Substrings in Wraparound String

    Consider the string s to be the infinite wraparound string of "abcdefghijklmnopqrstuvwxyz" ...

  10. [转]linux下ulimit命令详解

    转自:http://blog.chinaunix.net/uid-23842323-id-2656582.html 1,说明:ulimit用于shell启动进程所占用的资源.2,类别:shell内建命 ...