npm和gulp学习

npm的使用

node

• Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,是一种JavaScript语言运行平台,和浏览器这个运行平台是同一个概念。

npm

• npm平台包管理工具(Node Package Manager):通过一套命令统一管理常用的类库。平时用npm下载jquery、bootstrap、angular等插件、库或框架。

npm的安装

• node.js官网下载：https://nodejs.org/en/

• 安装完成后，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的使用

官网

Gupl官网：http://www.gulpjs.com

Gulp 中文网：http://www.gulpjs.com.cn

Gulp 插件下载：https://www.npmjs.com/

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文件

1. 安装合并代码插件gulp-concat

    npm install gulp-concat
   

2. 引用gulp-concat

    var concat = require( 'gulp-concat' );
   

3. 书写合并代码

    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代码

1. 安装gulp-uglify

    npm install gulp-uglify
   

2. 引用gulp-uglify

    var press = require( 'gulp-uglify' );
   

3. 书写压缩代码

    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' ) );
    } );