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

作者: 抚年华轻过 | 来源:发表于2017-09-12 14:54 被阅读0次

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有什么区别?

npm install --save app：将在当前目录导入npm依赖包，并写入'dependencies'字段，当其他人下载代码并运行npm install时会自动下载。

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是什么？和其他同类型工具比有什么优势？

什么是webpack：Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具可以自动替你完成这些任务。Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

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

NPM（node package manager），通常称为node包管理器。
主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。（只要在npm官网搜索包名称，选择使用量最多的一个包，然后根据使用说明安装包）
npm是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。

2、命令行

node -v   //查看node版本
npm -v    //查看npm版本
sudo npm install npm -g    //更新npm的版本

3、node包的安装

本地安装：package会被下载到当前所在目录，也只能在当前目录下使用

//npm install pkg
npm install grunt-cli
//安装结束后，当前目录下回多出一个node_modules目录，grunt-cli就安装在里面。

运行如上命令，就会在当前目录下安装grunt-cli（grunt命令行工具）

全局安装：package会被下载到到特定的系统目录下，安装的package能够在所有目录下使用

npm install -g grunt-cli    //npm uninstall -g grunt-cli删除全局安装的包

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

如果使用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包

在bash里新建一个新的文件夹
在新建目录下执行

npm init   //会出现一段需要输入的文字

根据需求输入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，里面有输入的信息

新建readme.md，相当于使用指南
新建main.js，输入其他依赖的包

//main.js
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;

下载需要的包

npm install --save marked   //在npm 官网下载包
//因为当前目录没有依赖的marked包，所以只有下载下来才不会报错
//同时，在package.json文件中新增了dependencise属性

下载自己开发测试需要的包

npm install --save-dev easytal    //在npm官网下载包
//区别于6，现在下载的包是用于自己测试自己开发的包所需要的依赖，并不是自己开发的包的依赖
//package.json文件中增加的devDependencise属性，别人下载我的包的时候不会同时下载这个依赖的包

2、上传包

登录npm

npm login
//在出现的提示中输入name和password

上传自己开发好的包

npm publish

确认是否发送成功

在npm官网搜索包的名字

3、新建包用于全局安装

作用：不需要指定文件夹，在任何文件夹下都可以执行包
执行新建node包中的1-7步骤
在main.js,增加语句

//main.js
#!/usr/bin/env node    //一定要写这句话，表示用node执行当前的文件，在命令行中不用在开头写node
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;

在package.json中增加语句

"bin":{
  "example":"./main.js"     //表示当在命令行中输入example,就会执行main.js的这个脚本
}

上传包（跟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其他参数

在命令行输入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简介

地址 http://gulpjs.com/
作用：打造前端工作流的利器，打包、压缩、合并、git、远程操作...
提高编译效率：采用node.js数据流的机制。
（非数据流：打开一文件，修改文件，保存文件，再打开，再修改后保存...。数据流：修改文件不保存，等下次操作直接进行操作数据流，等全部操作完成再输出）

2、gulp安装

全局安装gulp

npm install gulp-cli -g

执行第二课"新建node包"中的1-4步骤
在命令行中新建gulpfile.js
打开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' ]);

根据gulpfile.js代码中第一行需求要安装依赖

npm install gulp --save-dev --registry=https://registry.npm.taobao.org      //通过淘宝镜像安装，不然太慢了

命令行输入gulp(若提示没有找到，说明gulp没有全局安装)

显示提示：
Cannot find module 'gulp-cssnano'      //根据提示安装依赖

安装gulp-cssnano依赖

npm install --save-dev gulp-cssnano

第四课

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

案例：修改文件后重启服务器

//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

案例：修改后有版本号

//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'])

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

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

2、package.json 有什么作用？

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

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

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

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

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

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

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

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

笔记

第一课

1、NPM

2、命令行

3、node包的安装

4、node包下载后代码的使用

第二课

1、新建node包

2、上传包

3、新建包用于全局安装

4、获取命令行输入的参数

5、模块

6、 package.json其他参数

第三课

1、gulp简介

2、gulp安装

第四课

1、实战

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

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

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

2、package.json 有什么作用？

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

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

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

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

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

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

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

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

笔记

第一课

1、NPM

2、命令行

3、node包的安装

4、node包下载后代码的使用

第二课

1、新建node包

2、上传包

3、新建包用于全局安装

4、 获取命令行输入的参数

5、 模块

6、 package.json其他参数

第三课

1、gulp简介

2、gulp安装

第四课

1、实战

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

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

4、获取命令行输入的参数

5、模块