饥人谷技术博客

npm-npmscript-gulp-webpack

2017-08-14  本文已影响0人  Eazer

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

npm install name -g

全局安装,应用被下载安装到全局目录中/usr/local/lib/node_modules

2.package.json有什么作用?

执行npm init生成package.json文件,该文件对项目记录了一些配置信息,主要是用来进行包管理。包括name、version、description、author、private、scripts、dependencies、decDependencies。其中scripts定义模块包的使用方式,dependencies和devDependencies是模块包的依赖管理
package.json文件说明:

"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}
{
  "devDependencies": {
    "browserify": "~13.0.0",//模版名+版本 
    "karma-browserify": "~5.0.1"
  }
}
"bin": {
"someTool": "./bin/someTool.js"
}

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

首先要区分dependencies和devDependencies。前者是项目开发环境必需的依赖,后者是方便于项目使用开发的工具如脚手架工具、测试工具等。

相同:都会在项目下的node_modules目录下下载app

不同:在往package.json文件写依赖时
--save 会写在dependencies下
--save-dev 会写在devDependencies下

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

在node.js中,模块分为内建模块,本地模块,node_module模块
当我们require一个模块时,先查找是否为内建模块,然后是否为本地模块,最后查找是否为node_module模块
当require的模块既不是内建模块,也不是本地模块,且在当前目录中的node_module中也找不到时,就会向上查找上一级的node_module,一直到根目录
当文件标识不以'./ ../'开头,则跳过本地模块查找,直接在node_module中查找。

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

webpack是一个模块加载器和打包工具,它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

优势:

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

npm script允许在package.json中使用scripts字段定义脚本命令

"scripts" : {
      "test": "echo hello",
      "build": “npm install -g package”
}

执行npm run build命令就等于执行npm install -g package命令。

7.使用 webpack

代码地址

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

gulp是一个以流为基础的前端自动化构建工具,可以实现css的压缩合并、js压缩合并、图片压缩等等

使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并:

1. 安装压缩插件
安装图像压缩插件
npm install gulp-imagemin --save-dev
安装文件合并插件
npm install gulp-concat --save-dev
安装css压缩插件
npm install gulp-cssnano --save-dev
安装js规范检查插件
npm install jshint gulp-jshint --save-dev
安装js压缩插件
npm install uglify --save-dev
2. 载入插件
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify'); // js压缩
var imagemin = require('gulp-imagemin'); // image压缩
var jshint = require('gulp-jshint'); // js代码规范性检查

3. 定义任务
定义css合并压缩任务
gulp.task('build:css', function() {
    gulp.src('./src/css/*.css')
        .pipe(concat('index-merge.css'))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/')); // 
})

定义js合并压缩任务
gulp.task('build: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('build:image', function() {
    gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'));
})

gulp.task('build', ['build:css', 'build:js', 'build:image']);
4. 执行任务
在命令行中执行命令:
gulp build

【个人总结,如有错漏,欢迎指出】
:>

上一篇 下一篇

猜你喜欢

热点阅读