web前端-深入(5)-npm-npmscript-gulp-webpack

1、如何全局安装一个 node 应用?

npm install -g [name]

2、package.json 有什么作用?

package.json定义了这个项目所需要的各种模板,以及项目的配置信息,当我们使用npm init命令时即可以生成package.json.

{
        "name": "my_package",     //项目名称,只能一个单词且全小写,允许-和_。发布的时候名字和npm官网不重名
        "version": "1.0.0",      //版本号。 
        "main": "index.js",      //main字段指定了加载的入口文件。
        "scripts": {                 //指定了运行脚本命令的npm命令行缩写
            "test": "echo \"Error: no test specified\" && exit 1"    //一般默认一个test的空文件夹、用作写测试代码。
        },
        "keywords": [],  //项目的关键词。
        "author": "ag_dubs", //作者名称
        "license": "ISC", //协议 
        "repository": {  // 用来存放到 版本管理远程服务。
            "type": "git",
            "url": "https://github.com/ashleygwilliams/my_package.git"
        },
        "dependencies": {   // 正式使用时,依赖的包
            "my_dep": "^1.0.0"
        },
        "devDependencies" : {//开发或者测试时,依赖的包,用户使用时不会被下载。
            "my_test_framework": "^3.1.0"
        }
        "bugs": {一个对象,包含url网址和邮箱,当使用者发现问题时,可以通过这两种方式提交问题
            "url": "https://github.com/ashleygwilliams/my_package/issues"
        },
        "homepage": "https://github.com/ashleygwilliams/my_package"  //项目主页
    }

3、npm install --save app 与 npm install --save-dev app有什么区别?

  1. npm install --save app:将在当前目录导入npm依赖包,并写入'dependencies'字段,当其他人下载代码并运行npm install时会自动下载。
  2. npm install --save-dev app:将在当前目录导入npm依赖包,并写入'devDependencies'字段,当其他人下载代码并运行npm install时不会自动下载。

4、 node_modules的查找路径是怎样的?

当前目录下寻找node_modules下的xxx,若没有,则返回到上一级目录的node_modules下寻找xxx,最终会找到根目录下node_modules下的xxx。

5、npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)

6、webpack是什么?和其他同类型工具比有什么优势?

  1. 什么是webpack:Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
  2. Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具可以自动替你完成这些任务。Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
  3. webpack的优势
    1、webpack是以commonJS的形式来书写脚本,但对AMD/CMD的支持也很全面
    2、Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
    3、webpack本身只能处理原生JS模块,但是loader转换器可以将各种类型的资源转换成JS模块。这样,任何资源都可以成为webpack可以处理的模块
    4、webpack有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是commonJS,AMD还是普通的JS文件。
    5、webpack还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的webpack插件,来满足各种各样的需求。
    6、webpack使用异步I/O和多级缓存提高运行效率,使得它能够快速增量编译

7、npm script是什么?如何使用?

npm 允许在package.json文件里面,使用scripts字段定义脚本命令。这些定义在package.json里面的脚本,就称为 npm script。

//package.json
"scripts":{
  "start": "mkdir cd",
  "bulid":"touch index1.js",
  "test":"echo test..."
}
npm start
npm test
npm run bulid

8、使用 webpack 替换 入门-任务15中模块化使用的 requriejs

企业官网
代码

9、gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp是前端自动化构建工作流的利器,自动化地完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

//gulpfile.js

var gulp = require('gulp'), 
     minify= require('gulp-minify-css'),     //css压缩
     uglify= require('gulp-uglify'),            //生成文件
     concat=require('gulp-concat'),        //合并成一个文件
     
     rename=require('gulp-rename'),     //重命名
     clean=require('gulp-clean'),           //清空文件夹

     minhtml=require('gulp-htmlmin'),     //html压缩
     jshint=require('gulp-jshint'),            //js代码规范性检查
     imagemin=require('gulp-imagemin');          //图片压缩

gulp.task('html',function(){
  return gulp.src('src/*.html')
        .pipe(minhtml({collapseWhitespace:true}))
        .pipe(gulp.dest('dist'))
});

gulp.task('css', function(){
  gulp.src("src/css/*.css")       
         .pipe(concat("merge.min.css"))
         .pipe(minifycss())
         .pipe(gulp.dest("dist/css/"));
});

gulp.task('js', function(){
  gulp.src("src/js/*.js")     
         .pipe(jshint())
         .pipe(jshint.reporter('default'))  

         .pipe(concat('merge.js'))
         .pipe(uglify())
         .pipe(gulp.dest("dist/js/"));
});

gulp.task('img', function(argument){
  gulp.src("src/img/*")     
         .pipe(imagemin())
         .pipe(gulp.dest("dist/imgs/"));  
});

gulp.task('clean', function(argument){
  gulp.src("dist/*",{read:false})     
         .pipe(clean());  
});

gulp.task('build', ['html','css','js','img' ]);

10、开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

暂定

笔记

第一课
1、NPM
  1. NPM(node package manager),通常称为node包管理器。
  2. 主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。(只要在npm官网搜索包名称,选择使用量最多的一个包,然后根据使用说明安装包)
  3. npm是基于couchdb的一个数据库,详细记录了每个包的信息,包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。
2、命令行
node -v   //查看node版本
npm -v    //查看npm版本
sudo npm install npm -g    //更新npm的版本
3、node包的安装
  1. 本地安装:package会被下载到当前所在目录,也只能在当前目录下使用
//npm install pkg
npm install grunt-cli
//安装结束后,当前目录下回多出一个node_modules目录,grunt-cli就安装在里面。

运行如上命令,就会在当前目录下安装grunt-cli(grunt命令行工具)

  1. 全局安装:package会被下载到到特定的系统目录下,安装的package能够在所有目录下使用
npm install -g grunt-cli    //npm uninstall -g grunt-cli删除全局安装的包

运行如上命令,就会在特定的系统目录下安装grunt-cli(grunt命令行工具)

  1. 如果使用npm安装插件太慢(被墙),可执行
 npm install -g cnpm --registry=https://registry.npm.taobao.org   //先安装cnpm, 之后再安装插件时用cnpm安装cnpm install pkg
4、node包下载后代码的使用
//这是目录表
www/
    demo1/
    --demo2/
    ----node_modules/
    -----marked.js
    ----index.js
//index.js
var marked=require("marked");    
//代码会在当前目录下的node_modules文件下找marked.js,若没有,则在上一级的demo1的文件夹下的node_modules文件下找marked.js,直到找到为止
第二课
1、新建node包
  1. 在bash里新建一个新的文件夹
  2. 在新建目录下执行
npm init   //会出现一段需要输入的文字
  1. 根据需求输入node包信息
name:demo1      //命名必须是唯一的,不能和npm官网的node包重名
version:(1.0.0)     //默认
description:这是测试
enter point:(main.js)    //输入入口,当调用这个包时就执行这个脚本
test command:
git reposotory:http://github.com/Ethan66/demo1   //输入上传到github的网址
keywords:this is test
author: Ethan
输入 yes完成node初始化,当前目录下出现了package.json,里面有输入的信息
  1. 新建readme.md,相当于使用指南
  2. 新建main.js,输入其他依赖的包
//main.js
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;
  1. 下载需要的包
npm install --save marked   //在npm 官网下载包
//因为当前目录没有依赖的marked包,所以只有下载下来才不会报错
//同时,在package.json文件中新增了dependencise属性
  1. 下载自己开发测试需要的包
npm install --save-dev easytal    //在npm官网下载包
//区别于6,现在下载的包是用于自己测试自己开发的包所需要的依赖,并不是自己开发的包的依赖
//package.json文件中增加的devDependencise属性,别人下载我的包的时候不会同时下载这个依赖的包
2、上传包
  1. 登录npm
npm login
//在出现的提示中输入name和password
  1. 上传自己开发好的包
npm publish
  1. 确认是否发送成功
在npm官网搜索包的名字
3、新建包用于全局安装
  1. 作用:不需要指定文件夹,在任何文件夹下都可以执行包
  2. 执行新建node包中的1-7步骤
  3. 在main.js,增加语句
//main.js
#!/usr/bin/env node    //一定要写这句话,表示用node执行当前的文件,在命令行中不用在开头写node
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;
  1. 在package.json中增加语句
"bin":{
  "example":"./main.js"     //表示当在命令行中输入example,就会执行main.js的这个脚本
}
  1. 上传包(跟2.上传包步骤一样)
  2. 安装包,看是否可以全局
npm install -g demo1   //demo1为package.json的name值
npm list -g --depth 0  //查看全局安装过的包
//C:\Users\Administrator\AppData\Roaming\npm(测过:windows所有全局安装的node包都在这个路径下)
//显示路径/usr/local/lib/node_modules/为所有全局安装的node包都在这个路径下
4、 获取命令行输入的参数
node main.js 杭州      //如何在代码中获取杭州
//main.js
console.log(process.argv[2])    //process.argv是一个数组,第三个就是命令行输入的参数
5、 模块
//和jq中ajax发请求类似的模块
axios或request     //向一个地址发送请求,获取数组
6、 package.json其他参数
  1. 在命令行输入npm run,然后再输入scripts的属性名(start,bulid,test),执行相对于的语句,注意:只有start和test前面写省略run,其他全部要加run
"scripts":{
  "start": "mkdir cd",
  "bulid":"touch index1.js",
  "test":"echo test..."
}
npm start
npm test
npm run bulid

第三课

1、gulp简介
  1. 地址 http://gulpjs.com/
  2. 作用:打造前端工作流的利器,打包、压缩、合并、git、远程操作...
  3. 提高编译效率:采用node.js数据流的机制。
    (非数据流:打开一文件,修改文件,保存文件,再打开,再修改后保存...。数据流:修改文件不保存,等下次操作直接进行操作数据流,等全部操作完成再输出)
2、gulp安装
  1. 全局安装gulp
npm install gulp-cli -g
  1. 执行第二课"新建node包"中的1-4步骤
  2. 在命令行中新建gulpfile.js
  3. 打开gulpfile.js文件,输入固定代码
var gulp = require('gulp');       //需要安装gulp包
var pug = require('gulp-pug');    //把一个模板生成html
var less = require('gulp-less');     //把一个less文件生成css
var minifyCSS = require('gulp-csso');     //把css文件压缩

//给gulp创建了一个html的任务,把src里面的路径文件变成数据流传给pipe,再传给pug进行处理,最后输出为html。在命令行中执行gulp html就会执行这条任务
gulp.task('html', function(){
  return gulp.src('client/templates/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('build/html'))
});

gulp.task('css', function(){
  return gulp.src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});
//这条语句表示在命令行中输入gulp,就会默认执行html和css两个任务
gulp.task('default', [ 'html', 'css' ]);
  1. 根据gulpfile.js代码中第一行需求要安装依赖
npm install gulp --save-dev --registry=https://registry.npm.taobao.org      //通过淘宝镜像安装,不然太慢了
  1. 命令行输入gulp(若提示没有找到,说明gulp没有全局安装)
显示提示:
Cannot find module 'gulp-cssnano'      //根据提示安装依赖
  1. 安装gulp-cssnano依赖
npm install --save-dev gulp-cssnano

第四课

1、实战
  1. 案例:css压缩
//gulpfile.js

var gulp = require('gulp'); 
var cssnano = require('gulp-cssnano');     //css压缩
var concat= require('gulp-concat');            //生成文件

gulp.task('build:css', function(){
  gulp.src("./src/css/*.css")       //想要个别文件:src(['client/templates/1.less','client/templates/3.less'])
         .pipe(concat("index-merge.css"))
         .pipe(cssnano())
         .pipe(gulp.dest("dist/css/"));
});

gulp.task('default', [ 'build:css' ]);
  1. 案例:修改文件后重启服务器
//gulpfile.js

var gulp = require('gulp'); 
var browserSync= require('browser-sync').create();     //css压缩
var fs= require('fs');            //生成文件

gulp.task('reload', function(){
 browserSync.reload();
});

gulp.task('server', function(){         //当运行gulp server时,本地开启服务器,浏览器会看到这个页面
 browserSync.init({
     server:{
       baseDir:"./src"
      }
  })
});

gulp.watch(['**/*.css','**/*.html','**/*.js'],['reload']);      //当文件发生改动,启动reload
  1. 案例:修改后有版本号
//gulpfile.js

var gulp=require('gulp'),
      rev=require('gulp-rev'),      //添加版本号
      revReplace=require('gulp-rev-replace'),            //版本号替换
      useref=require('gulp-useref'),                        //解析html资源定位
      gulpif=require('gulp-if'),
      filter=require('gulp-filter'),
      uglify=require('gulp-uglify'),
      csso=require('gulp-csso'),                        //css优化压缩
      clean=require('gulp-clean'),
      imagemin=require('gulp-imagemin'),
      concat=require('gulp-concat'),
      less=require('gulp-less'),
      autoprefixer=require('gulp-autoprefixer'),       //css自动加前缀,css后编译,兼容其他的浏览器
      connect=require('gulp-connect');

gulp.task('img',function(){
  gulp.src('src/imgs/*').pipe(imagemin())
      .pipe(gulp.dest('dist/imgs'))
});

gulp.task(dist:'css',function(){
  gulp.src('dist/css/*').pipe(clean());
  return gulp.src('src/css/*.less')
      .pipe(less()).pipe(csso())
      .pipe(concat('merge.css'))
      .pipe(autoprefixer(){
            browsers:['last 2 versions'],      //考虑浏览器最新的2个版本
            cascade:false
       })
      .pipe(gulp.dest('dist/css'))
});

gulp.task('src:css',function(){
  gulp.src('src/css/*').pipe(clean());
  return gulp.src('src/css/*.less')
      .pipe(less()) .pipe(concat('merge.css'))
      .pipe(autoprefixer(){
            browsers:['last 2 versions'],
            cascade:false
       })
      .pipe(gulp.dest('src/css'))
});

gulp.task('js',function(){
  gulp.src('src/js/*').pipe(clean());
  return gulp.src('src/js/*.js').pipe(uglify()) 
      .pipe(concat('merge.js'))
      .pipe(gulp.dest('dist/js'))
});

gulp.task('revision',['dist:css','js'],function(){
  return gulp.src(['dist/js/*.js','dist/css/*'])
      .pipe(rev()) .pipe(gulp.dest('dist'))
      .pipe(rev.manifest())                          //会生成rev-manifest.json文件,记录版本及对应文件名
      .pipe(gulp.dest('dist'))
});

gulp.task('index',['revision'],function(){
  var mainifest=gulp.src('./dist/rev-mainifest.json');     //得到记录版本号的文件
  return gulp.src('src/index.html')
      .pipe(revReplace(                       //对index.html进行各替换,需要在index.html内写上注释(视频39分处)
            manifest:manifest
      )) 
      .pipe(useref())
      .pipe(gulp.dest('dist'))
});

gulp.task('watch',function(){
  gulp.watch('src/**/*.less',['src:css'])
})

gulp.task('connect',function(){                 //作用:创建个服务器,当你保存的时候会自动刷新
  connect.server({
            root:'src',
            livereload:true
      })
})

gulp.task('reload',function(){
   gulp.src('src/*.html').pipe(connect.reload())
})

gulp.task('change',function(){
   gulp.wathc(['src/**/*'],['src:css','reload'])
})

gulp.task('server',['connect','change'])
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,428评论 1 32
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,354评论 0 13
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,134评论 7 35
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,160评论 40 247
  • 题目1: 如何全局安装一个 node 应用? Node模块采用npm install命令安装。 每个模块可以“全局...
    萧雪圣阅读 1,769评论 0 1