npm、browser-sync 、gulp工具的学习

npm

• 官网[https://www.npmjs.com]
• node package manager
• 命令:
  • 初始化:npm init
  • 安装指定包:npm install jquery --save
  • 删除指定包:npm remove jquery --save
  • 卸载一般用 npm uninstall --save jquery 或者 npm remove --save jquery
  • 下载安装package.json中dependencies属性对的文件:npm install --production
• npm的使用步骤
  • 第一步、npm init创建一个文件夹（注意：不要用中文名,不能以数字开头，不能有空格）
  • 第二步、执行npm init -y
  • 第三步、安装需要的js库 npm install --save jquery

browser-sync

• 更改代码之后自动刷新浏览器
• 需要使用npm进行全局安装:npm install browser-sync -g,-g表示安装到全局
• 使用:browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*"
• --files参数指定要监视的文件，后面跟要监视的文件的文件路径以逗号分隔。

gulp

官网
中文网

• 前端自动化构建工具
  js压缩,var x,xname，混淆
  合并.
  css压缩
  html压压缩

• grunt ,webpack...

核心就5个方法

• task,gulp中是一个个任务的形式来实现功能。
  • task('任务名',function(){
    .....
    });
• src
  • src('./*.js')
• dest('./minjs/')// 指定处理后的文件的输出路径.
• watch('./*.js',['任务名1','任务名2']);
• run('任务名');//执行指定的任务.

gulp的安装

• 使用npm 进行安装
• npm install gulp-cli -g;

gulp 使用

使用时还需要在项目中通过npm非全局安装gulp

• npm install gulp --save-dev
  • -dev安装在本地
  • 之所以在全局安装了一次还有在项目中安装，是为了保证gulp的版本的控制，每次使用的时候重新安装能控制gulp的版本

还需要在当前项目根目录添加一个gulpfile.js文件来写具体的任务代码.

// 得到gulp对象
var gulp = require("gulp");
//引入gulp-uglify插件 用来压缩js
var uglify = require('gulp-uglify');
//引入gulp-concat插件 用来合并代码 js,css都能合并
var concat = require('gulp-concat');
//引入gulp-cssnano插件 用来对css进行压缩
var cssnano = require('gulp-cssnano');
//引入gulp-htmlmin插件 用来对html代码进行压缩
var htmlmin = require('gulp-htmlmin');
//引入gulp-imagemin插件 对图片进行压缩
var imagemin = require('gulp-imagemin');
//引入gulp-spriter插件 合并成精灵图
var spriter = require('gulp-spriter');

//创建js压缩任务
gulp.task('script',function(){
  // 这里写任务具体需要做的事情.
  // 2.匹配到app.js文件,如果使用多个规则，需要以数组的形式来书写第一个参数，数组中的每一个元素都是一个规则。
  gulp.src(['./app.js','./signIn.js'])
  //合并后生成的文件名
  .pipe(concat('all.js'))
  //调用方法 压缩js
  .pipe(uglify())
  //将合格的js文件 输出到指定目录
  .pipe(gulp.dest('./dist'))
});
//创建css压缩任务
gulp.task('style',function(){
   // 匹配css文件
   gulp.src(['./style.css','./signIn.css'])
   .pipe(concat('all.css')) // 需要指定一个名字，作为压缩后文件的文件名
   .pipe(cssnano())
   .pipe(gulp.dest('./dist'))
});
//创建html压缩任务
gulp.task('htmlmin',function(){
    gulp.src('./index.html')
        .pipe(htmlmin({
            //collapseWhitespace:清除空格
            collapseWhitespace:true,
            //collapseBooleanAttributes:省略布尔属性的值，
            collapseBooleanAttributes:true,
            //removeComments:清除html中注释的部分
            removeComments:true,
            //removeEmptyAttributes:清除所有的空属性
            removeEmptyAttributes:true,
            //removeSciptTypeAttributes:清除所有script标签中的type="text/javascript"属性。
            removeScriptTypeAttributes:true,
            //removeStyleLinkTypeAttributes:清楚所有Link标签上的type属性
            removeStyleLinkTypeAttributes:true,
            //minifyJS:压缩html中的javascript代码。
            minifyJS:true,
            //minifyCSS:压缩html中的css代码
            minifyCSS:true
        }))
        .pipe(gulp.dest('./dist'));
});
//创建合并压缩方法
gulp.task('concat',function(){
    // 匹配文件
    gulp.src(['./1.js','./2.js'])
        //调用合并方法 生成新的文件名
        .pipe(concat('index.js'))
        //调用压缩方法
        .pipe(uglify())
        //输出到指定目录
        .pipe(gulp.dest('./build'));
})
//创建图片压缩方法
gulp.task('imagemin',function(){
  //引入图片地址方法
  gulp.src('./images/*')
      //调用图片压缩
      .pipe(imagemin())
      //输出压缩后图片的存放地址
      .pipe(gulp.dest('dist/images'));
});
//创建合并精灵图任务
gulp.task('spriter',function(){
  return gulp.src('./style.css')//原始的css文件地址
             //调用spriter精灵图合并方法
             .pipe(spriter({
               sprite:'test.png',//合并后图片的名字
               slice:'./slice',//原始小图片路径
               outpath:'build/tests'//合并后的大图的地址
             }))
             //合并精灵图后的css的文件地址
             .pipe(gulp.dest('./build/css'));
})
//创建监视任务
gulp.task("watch",function(){
      //调用watch方法
      //第一个参数是监视目标文件,第二个参数是执行的任务
      gulp.watch(['./app.js','./signIn.js'],["script"]);
  })

• 调用方法直接在控制台输入gulp 任务名

gulp监视文件的改变

• 监视文件,当文件发生改变时,watch方法就会执行目标文件所绑定的事件
• 使用：在cmd命令窗口直接调用gulp myWatch方法
• 第一个参数是监视目标文件,第二个参数是执行的任务

  gulp.task("myWatch",function(){
      gulp.watch(["./a.html","./b.html"],function(){
          console.console.log()
      })
  })

gup 结合browsr-sync使用

//gulp结合browser-sync一起使用
//当你改动html,css,js的时候 --> 合并,压缩我们的html,js,css --> browser-sync刷新浏览器
//使用之前要在当前项目安装browser-sync 命令:npm install --save-dev browser-sync
var browserSync = require('browser-sync') //得到browserSync对象
//创建browserSync任务
gulp.task("browserSync",function(){ // 静态服务器
        //第一步先用gulp监视index.html,如果有改动就会执行htmlmin这个任务
        gulp.watch(["./index.html"],["htmlmin"]);
        //第二步开启browserSyn,一旦html文件夹里面压缩的html有改动，就会刷新浏览器
        browserSync({
            server:{
                baseDir:"./html" //创建服务器的文件夹
            },
            files:["./html/index.html"] //同步的html代码
        });
    })

gulp的一些插件

• 也是使用npm安装
• 对js代码进行压缩 gulp-uglify
• 对代码进行合并 gulp-concat
• 对css进行压缩 gulp-cssnano
• 对html进行压缩 gulp-htmlmin
• 对图片进行压缩 gulp-imagemin
• 合并精灵图 gulp-spriter