美文网首页
npm,gulp,webpack

npm,gulp,webpack

作者: leocz | 来源:发表于2017-09-13 15:40 被阅读0次

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

npm install -g name

2.package.json有什么用

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

3.npm install --save app 与npm install --save-dev app的区别

npm install --save 会将该app模块写入package.json中的dependencies中,表示此包的运行的依赖。
npm install --save-dev  会将该app模块写入package.json中的devDependencies中,表示开发的依赖,一般是测试所用模块

比人在使用你的npm包时,会下载dependencies也就是运行所需依赖,而devDependencies中的不会下载。

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

node_module首先在当前目录下查找,在当前目录下面没有找到node_module的话就想上一级查找,直至根目录。

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

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

优势:

  1. 对CommonJS、AMD、ES6的语法兼容
  2. 对js、css、图片等资源文件都支持打包
  3. 有独立的配置文件webpack.config.js
  4. 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
  5. 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活
  6. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持

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

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

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

这是package.json文件中的一段片段,里面的scripts字段是一个对象,它的每一个属性,对应一段脚本。比如,build命令对应的脚本是node build.js

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

7.webpack实例

效果→

8.gulp是什么?使用gulp实现图片压缩,css压缩合并,js压缩合并

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,它借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

//安装插件
npm install gulp-imagemin --save-dev //图片压缩
npm install gulp-cssnano --save-dev //css压缩
npm install uglify --save-dev //js压缩
npm install gulp-jshint --save-dev //js规范检查
npm install gulp-concat --save-dev //文件合并
npm install gulp-rename --save-dev //重命名

//gulpfile.js
//引入插件
var gulp = require('gulp'),
cssnano = require('gulp-cssnano'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename');

//css合并压缩
gulp.task('css', function () {
gulp.src('./src/css/*.css')
  .pipe(concat('merge.css')) //将文件合并
  .pipe(rename({
   suffix: '.min' //文件名后加上 .min 
  }))
  .pipe(cssnano()) //css压缩
  .pipe(gulp.dest('dist/css/')); //输出
})

//js合并压缩
gulp.task('js', function () {
gulp.src('src/js/*.js')
  .pipe(jshint()) //js规范检查
  .pipe(jshint.reporter('default'))
  .pipe(concat('merge.js'))
  .pipe(rename({
   suffix: '.min'
  }))
  .pipe(uglify())
  .pipe(gulp.dest('dist/js/'));
})

//图片压缩
gulp.task('image', function () {
gulp.src('src/imgs/*')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/imgs/'));
})

gulp.task('build', ['css', 'js', 'image'])

相关文章

  • webpack总结

    安装webpack npm install -g webpack gulp --registry=http://r...

  • npm/gulp/webpack

    如何全局安装一个 node 应用? 通过下面这个命令可以全局安装一个node应用 简写形式 通过全局安装的node...

  • npm 、webpack、gulp

    package.json 有什么作用? 每个项目的根目录下面,一般都有一个package.json文件,定义了这个...

  • npm,gulp,webpack

    1.如何全局安装一个node应用? 2.package.json有什么用 每个项目的根目录下,都有一个packag...

  • Npm | Gulp | Webpack

    如何全局安装一个 node 应用? npm install -g package.json 有什么作用? 可以理解...

  • 金山WPS

    npm切换版本 webpack将抽离出来的css文件如何引用到文件中 webpack和gulp区别及webpack...

  • 关于npm,gulp,webpack

    1. 如何全局安装一个 node 应用? 2. package.json 有什么作用? package.json是...

  • npm-gulp-webpack

    题目1: 如何全局安装一个 node 应用? 题目2: package.json 有什么作用? 每个项目的根目录下...

  • npm npmscript gulp webpack

    题目1: 如何全局安装一个 node 应用?npm i [name] -g 题目2: package.json 有...

  • gulp与webpack的区别

    gulp webpack 相同功能: 功能 gulp webpack gulp.task('sass'...

网友评论

      本文标题:npm,gulp,webpack

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