美文网首页我爱编程
npm-npmscript-gulp-webpack

npm-npmscript-gulp-webpack

作者: 无目的 | 来源:发表于2017-08-09 10:56 被阅读0次

    题目1:如何全局安装一个 node 应用?

    npm install -global webpack
    

    题目2: package.json 有什么作用?

    • 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

    • 下面是一个最简单的package.json文件,只定义两项元数据:项目名称和项目版本。

    {
      "name" : "xxx",
      "version" : "0.0.0",
    }
    

    package.json文件就是一个JSON对象,该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称,version是版本(遵守“大版本.次要版本.小版本”的格式)。

    下面是一个更完整的package.json文件。

    {
        "name": "Hello World",
        "version": "0.0.1",
        "author": "张三",
        "description": "第一个node.js程序",
        "keywords":["node.js","javascript"],
        "repository": {
            "type": "git",
            "url": "https://path/to/url"
        },
        "license":"MIT",
        "engines": {"node": "0.10.x"},
        "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
        "contributors":[{"name":"李四","email":"lisi@example.com"}],
        "scripts": {
            "start": "node index.js"
        },
        "dependencies": {
            "express": "latest",
            "mongoose": "~3.8.3",
            "handlebars-runtime": "~1.0.12",
            "express3-handlebars": "~0.5.0",
            "MD5": "~1.2.0"
        },
        "devDependencies": {
            "bower": "~1.2.8",
            "grunt": "~0.4.1",
            "grunt-contrib-concat": "~0.3.0",
            "grunt-contrib-jshint": "~0.7.2",
            "grunt-contrib-uglify": "~0.2.7",
            "grunt-contrib-clean": "~0.5.0",
            "browserify": "2.36.1",
            "grunt-browserify": "~1.3.0",
        }
    }
    

    题目3: npm install --save app 与 npm install --save-dev app有什么区别?

    • pm install 在安装 npm 包时,有两种方式把依赖包信息写入 package.json 文件,一种是npm install --save,会把依赖包 dependencies,另一个是 npm install --save-dev,则写进devDependencies
    • --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西

    题目4: node_modules的查找路径是怎样的?
    从当前目录开始逐级向上查找node_modules

    题目5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)
    npm3在安装模块时就按字母序安装在node_modules的第一级目录

    当后续包有重复依赖时就不需要重新安装

    yarn是优化了的npm,速度更快。

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

    • WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

    • WebPack和Grunt以及Gulp相比有什么特性

      • Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。

      • Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

      • Webpack的处理速度更快更直接,能打包更多不同类型的文件。

    题目7:npm script是什么?如何使用?
    npm 允许在package.json文件里面,使用scripts字段定义脚本命令。

    {
      // ...
      "scripts": {
        "build": "node build.js"
      }
    }
    

    上面代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,build命令对应的脚本是node build.js。
    命令行下使用npm run命令,就可以执行这段脚本。

    $ npm run build
    

    等同于执行

    $ node build.js
    

    这些定义在package.json里面的脚本,就称为 npm 脚本。它的优点很多。
    项目的相关脚本,可以集中在一个地方。
    不同项目的脚本命令,只要功能相同,就可以有同样的对外接口。用户不需要知道怎么测试你的项目,只要运行npm run test即可。
    可以利用 npm 提供的很多辅助功能。
    查看当前项目的所有 npm 脚本命令,可以使用不带任何参数的npm run命令。

    $ npm run
    

    题目8:使用 webpack 替换 入门-任务15中模块化使用的 requriejs
    代码

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

    • gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率
    • 压缩
    var gulp = require('gulp')                         //导入gulp
    var cssnano = require('gulp-cssnano')              //导入css压缩包             
    var concat = require('gulp-concat')                //导入文件合并包
    var jsmin = require('gulp-uglify')                 //导入JS压缩包
    var imgmin = require('gulp-imagemin')              //导入图片压缩包
    
    gulp.task('build:img',function(){                  //图片压缩任务
        gulp.src('./images/*.jpg')
            .pipe(imgmin())
            .pipe(gulp.dest('./dist/img/'))
    })
    
    
    gulp.task('build:css',function(){                  //css合并压缩任务
        gulp.src('./css/*.css')
            .pipe(concat('all.css'))
            .pipe(cssnano())
            .pipe(gulp.dest('./dist/css/'))
    })
    
    gulp.task('build:js',function(){                   //js合并压缩任务
        gulp.src('./js/**/*.js')
            .pipe(concat('all.js')) 
            .pipe(jsmin())
            .pipe(gulp.dest('./dist/js/'))
    })
    gulp.task('default',['build:img','build:css','build:js'])
    

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

    npm install hunger-weather -g
    weather
    

    相关文章

      网友评论

        本文标题:npm-npmscript-gulp-webpack

        本文链接:https://www.haomeiwen.com/subject/iobvlxtx.html