npm的使用
node
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,是一种JavaScript语言运行平台,和浏览器这个运行平台是同一个概念。
npm
- npm平台包管理工具(Node Package Manager):通过一套命令统一管理常用的类库。平时用npm下载jquery、bootstrap、angular等插件、库或框架。
npm的安装
- :
安装完成后,shift+鼠标右键,选择在此窗口打开命令行,验证版本看是否安装OK。
node -v npm -v
初始化
在相应文件夹内shift+鼠标右键,选择在此处打开命令窗口
npm init
一直Enter键,最后会生成package.json文件
下载包
npm属于国外网站,下载速度可能比较慢,加上淘宝镜像速度会快些
淘宝镜像:--registry=https://registry.npm.taobao.org
npm install jquery //当前目录下安装 npm install jquery --save //下载之后会在package.json中生成当前下载的包的版本信息 npm install jquery -g //全局安装 npm install jquery@version //在当前目录安装指定版本的包 npm uninstall jquery //删除当前目录下的包
一般使用第二行代码下载,因为下载之后会在package.json中生成当前下载的包的版本信息,若是得到的是带版本信息的package.json,只用执行npm install
就会把所有的包下载。
gulp的使用
官网
:
:
:
gulp是什么
- gulp是前端开发过程中对代码进行自动化构建的工具。它不仅能对资源进行优化,而且在开发过程中能够通过配置自动完成很多重复的任务,让我们可以专注于代码,提高工作效率
gulp的使用
5个核心方法
- gulp.task('任务名',function(){}) // 创建任务。
- gulp.src('./*.css') 指定想要处理的文件。
- gulp.dest() // 指定最终处理后的文件的存放路径。
- gulp.watch() // 自动的监视文件的变化,然后执行相应任务。
- gulp.run('任务名'),直接执行相应的任务。
基本使用
1. 全局安装gulp
npm install --global gulp //全局安装 默认安装路径C:\Users\Administrator\AppData\Roaming\npm\node_modules
2. 局部安装gulp以及相关依赖(devDependencies)
npm install --save-dev gulp
3. 根目录新建一个gulpfile.js
,在内部引入gulp
var gulp = require('gulp')
4. 创建任务
gulp.task('taskName',function(){ console.log(‘runing task’); })
5. 在命令行中执行任务
gulp.task('test',function(){ console.log(‘runing task’); }) gulp test //若任务名是default 则只用执行gulp
使用gulp-concat
合并js文件
安装合并代码插件
gulp-concat
npm install gulp-concat
引用
gulp-concat
var concat = require( 'gulp-concat' );
书写合并代码
gulp.task( 'cat', function () { // gulp.src( './js/*.js' ) // 合并js文件夹下的所有js文件 // 按顺序合并指定js文件 gulp.src( [ './js/Itcast.core.js', './js/Itcast.ctor.js', './js/Itcast.dom.js', './js/Itcast.event.js', './js/Itcast.style.js', './js/Itcast.attr.js' ] ) // 使用 gulp-concat 合并 .pipe( concat( 'bundle.js' ) ) // 最后将处理好的文件保存在 dist 文件夹下 .pipe( gulp.dest( './dist' ) ); } );
使用gulp-uglify
压缩js代码
安装
gulp-uglify
npm install gulp-uglify
引用
gulp-uglify
var press = require( 'gulp-uglify' );
书写压缩代码
gulp.task( 'press', function () { // 指定需要被压缩的文件 gulp.src( './dist/*.js' ) // 使用press方法压缩 .pipe( press() ) // 输出到指定目录 .pipe( gulp.dest( './output' ) ); } );
对css进行合并压缩操作
npm install gulp-cssnano --save // 新建一个任务,对css进行处理 ulp.task('style', function(){ // 对项目中的2个css文件进行合并,压缩操作 // 1.匹配到要处理的文件 ulp.src(['./*.css']) // 2.合并文件 pipe(concat('index.css')) // 3.压缩操作 pipe(cssnano()) // 4.输出到指定目录 pipe(gulp.dest('./dist')) })
对html进行合并压缩
npm install gulp-htmlmin --save // 新建一个任务,对html进行压缩 gulp.task('html', function(){ // 1.匹配到要处理的文件 gulp.src(['./index.html']) // 2.压缩操作 .pipe(htmlmin({collapseWhitespace:true})) // 3.指定输出目录 .pipe(gulp.dest('./dist')) })
gulp.watch
- 监视文件的变化,然后执行相应的任务
gulp.run, 直接执行指定的任务
// gulp.watch 监视文件变化,执行相应任务 gulp.task('mywatch', function(){ // 执行指定的任务 gulp.run('script') // 1.监视js文件的变化,然后执行script任务 // 第一个参数:要监视的文件的规则 // 第二个参数:是要执行的任务 gulp.watch(['./app.js','sign.js'],['script']) })
执行多个任务
var gulp = require( 'gulp' ); var concat = require( 'gulp-concat' ); var press = require( 'gulp-uglify' ); gulp.task( 'concat', function () { gulp.src( [ './js/Itcast.core.js', './js/Itcast.ctor.js', './js/Itcast.dom.js', './js/Itcast.event.js', './js/Itcast.style.js', './js/Itcast.attr.js' ] ) .pipe( concat( 'Itcast.js' ) ) .pipe( gulp.dest( './dist' ) ); } ); gulp.task( 'concatPress', function () { return gulp.src( [ './js/Itcast.core.js', './js/Itcast.ctor.js', './js/Itcast.dom.js', './js/Itcast.event.js', './js/Itcast.style.js', './js/Itcast.attr.js' ] ) .pipe( concat( 'Itcast.min.js' ) ) .pipe( gulp.dest( './dist' ) ); } ); gulp.task( 'default', [ 'concat', 'concatPress' ], function () { gulp.src( './dist/Itcast.min.js' ) .pipe( press() ) .pipe( gulp.dest( './dist' ) ); } );