npm-npmscript-gulp-webpack

2017-05-11  本文已影响0人  _李祺

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

在终端输入npm install -g pkg pkg为安装包的名字
pkg会被下载到到特定的系统目录下,安装的pkg能够在所有目录下使用。

2. package.json 有什么作用?

  1. 相当于你本地项目的一个文档说明。
  2. 允许你指定你项目中所使用的node包的版本。
  3. 构建项目更加容易,便于给其他用户下载使用。

package.json示例:

{
  "name": "my_package",     //项目名称,全部小写,不能有空格,一个单词,允许-和_. 如果是要发布自己的node插件,一般用github上面项目名称。
  "version": "1.0.0",  //项目版本号,每发布一次,版本号要变更 
  "main": "index.js", //目录中启动文件名称。或者称之为入口文件,一般都是 index.js

  "scripts": { //scripts字段是一个对象。它的每一个属性,对应一段命令。
      "test": "echo \"Error: no test specified\" && exit 1"    //一般默认一个 test的空文件夹、用作写测试代码。
  },

  "keywords": [],  //项目的关键词。 一般用不到,发布npm才用得到。
  "author": "jrg", //作者名称
  "license": "ISC", //协议 

  "repository": {  // 用来存放到 版本管理远程服务。 发布npm才有用
      "type": "git",
      "url": "https://github.com/ashleygwilliams/my_package.git"
  },

  "dependencies": {   // 正式使用时,依赖的包
      "my_dep": "^1.0.0"
  },

  "devDependencies" : {  //开发或者测试时,依赖的包。
      "my_test_framework": "^3.1.0"
  }
}

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

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

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

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

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

npm允许在package.json文件里面,使用scripts字段定义命令。

"scripts": {
  "build": "node build.js",
  "test": "cd desktop"
}

scripts字段是一个对象。它的每一个属性,对应一段命令。build命令对应的脚本是node build.js。命令行下使用npm run命令,就可以执行这段命令。另外,执行test等node定义过的名字时,只需输入npm test即可执行。

$ npm run build
等同于执行
$ node build.js

$ npm test
等同于执行
$ cd desktop

优点:

  1. 项目的相关脚本,可以集中在一个地方。
  2. 不同项目的脚本命令,只要功能相同,就可以有同样的对外接口。用户不需要知道怎么测试你的项目,只要运行npm run test即可。
  3. 可以利用 npm 提供的很多辅助功能。

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

效果预览
代码地址

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

gulp是一款nodejs应用,它具有以下优点:
1. 易于使用
通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
2. 构建快速
利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
3. 高质量的插件
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
4. 易于学习
通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握,如同一系列流管道。

示例:

//下载npm包
npm install --save gulp            //本地使用gulp
npm install --save gulp-imagemin   //压缩图片
npm install --save gulp-minify-css //压缩css
npm install --save gulp-uglify     //压缩js
npm install --save gulp-concat     //文件合并

var gulp = require('gulp');
// 引入组件
var minifycss = require('gulp-minify-css'), // CSS压缩
    uglify = require('gulp-uglify'), // js压缩
    imagemin = require('gulp-imagemin'); //图片压缩
    concat = require('gulp-concat'), // 合并文件
    //rename = require('gulp-rename'), // 重命名
    //jshint = require('gulp-jshint'), //js代码规范性检查
    
gulp.task('css', function(argument) {
    gulp.src('src/css/*.css') //src/css路径下的所有css文件
        .pipe(concat('merge.css')) //合并所有css文件,新文件名为merge.css
        // .pipe(rename({
        //     suffix: '.min'
        // }))
        .pipe(minifycss()) //压缩merge.css
        .pipe(gulp.dest('dist/css/')); //输出至该目录
});

gulp.task('js', function(argument) {
    gulp.src('src/js/*.js') 、、选择
        // .pipe(jshint())
        // .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js')) //合并
        // .pipe(rename({
        //     suffix: '.min'
        // }))
        .pipe(uglify()) //压缩
        .pipe(gulp.dest('dist/js/')); //输出
});

gulp.task('img', function(argument){
    gulp.src('src/imgs/*') //选择
        .pipe(imagemin()) //压缩
        .pipe(gulp.dest('dist/imgs')); //输出
});
上一篇 下一篇

猜你喜欢

热点阅读