npm-npmscript-gulp-webpack

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

node install -g packagename

2.package.json 有什么作用?

配合npm使用

1. 配置模块包的基本信息
name,version,decription,entry point,test command
git  repository,keywords, author,license

2. 模块包的依赖管理
dependencies
devDependencies

3. 定义模块包的使用方式
script

4. 定义模块包的可执行文件地址
bin

5. 定义主程序入口
main

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

  • npm install --save app在package.json中创建
    "dependencies ": {
    "app": "xxx",
    }
    发布之后,项目运行仍依赖这个模块,会被用户下载。

  • npm install --save-dev app在package.json中创建
    "devDependencies": {
    "app": "xxx",
    }
    开发时依赖于这个模块,项目正常运行时不需要这个模块,不会被用户所下载。

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

require模块时,先在当前目录查找node_modules下的模块,如果没有,再往上一级目录中查询node_modules下的模块,层层递进,直到系统根目录。

5.npm3与 npm2相比有什么改进?

  • npm3和npm2在安装模块的时候,策略上前者优于后者。
  • npm2是纯粹的不共享包原则。
  • npm3的优化点在于对于以字母顺序安装npm包的时候,优先安装在node_modules第一层级目录。
  • 这样做的好处是如果后续包有相关依赖性则不需要重复安装。

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

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。
它是高度可配置的,四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。

优点:
快速运行,Webpack 使用异步 I/O 和多级缓存提高运行效率
功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的
Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件
Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。

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

npm scripts容许你在package.json文件的scripts字段定义脚本命令,通过终端使用。
需要注意的是,系统自带的关键字,运行时可以写npm XXX,其他自定义的需要写成npm run XXX

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

它是前端自动化构建工作流的利器,可以使用多个插件实现代码打包、压缩、合并、检测、浏览器自动刷新等功能。

var gulp = require('gulp')
var cssnano = require('gulp-cssnano') //压缩css
var uglify = require('gulp-uglify') //压缩js
var concat = require('gulp-concat') //文件合并
var imagemin = require('gulp-imagemin') //图片压缩
gulp.task('css', function(){   //task定义一个任务,执行:gulp css
    gulp.src('./src/css/*.css') //获取该路径下的所有css文件
            .pipe(concat('index-merge.css')) //3个文件合并成一份
            .pipe(cssnano())  //压缩数据流
            .pipe(gulp.dest('./dist/css/'))  //放置文件
})
gulp.task('js', function(){
    gulp.src('./src/js/*.js')
            .pipe(concat('index-merge.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js/'))
})
gulp.task('imgs', function(){
    gulp.src('./src/imgs/*.jpg')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/imgs/'))
})
gulp.task('default', ['css','js','imgs'])

你可能感兴趣的:(npm-npmscript-gulp-webpack)