npm

npm

• node package manager 项目管理的依赖包
• npm 使用
  • 1.初始化操作：npm init 会生成一个package.json文件
  • 下载所需要的包npm install 包名会去registry.npmjs.org地址下载

gulp

• 前端自动化构建工具
• js,代码压缩，混淆
• 合并

gulp5个核心方法

• gulp.task（'任务名'，function(){}）//创建任务
• gulp.src（'./*.css'）指定想要处理的文件
• gulp.dest()//指定最终处理后的文件的存放路径
• gulp.watch()//自动监视文件的变化，然后执行相应的任务
• gulp.run()//执行相应的方法

安装gulp

• 通过npm安装：npm install gulp-cli -g

gulp使用

• 1.在当前项目中也要安装gulp npm install gulp --save
• 2.创建一个gulpfile.js文件。

js压缩

• 先要相应的gulp-uglify插件 npm gulp-uglify --save

• 代码实现

    //引入gulp
    var gulp = require('gulp');
    var uglify=require("gulp-uglify");
  
    // 创建任务
    // 第一个参数：任务名
    // 第二个参数：回调函数
    //处理app.js文件
    gulp.task("script",function(){
        //处理文件的路径
        gulp.src("./app.js")
        //对app.js进行压缩
        .pipe(uglify())
        //处理后文件存放的路径
        .pipe(gulp.dest("./dist"));
    });
  

对js进行合并操作

• 先要下载gulp-concat插件 npm install gulp-concat --save

• 代码

    //引入gulp
    var gulp = require('gulp');
    var uglify=require("gulp-uglify");
    var concat=require("gulp-concat");
    // 创建任务
    // 第一个参数：任务名
    // 第二个参数：回调函数
    //处理app.js与test.js文件
    gulp.task("script",function(){
        //处理文件的路径
        gulp.src(["./app.js","./test.js"])
        //concat合并 c参数为合并之后的文件名
        .pipe(concat("index.js"))
        //对app.js进行压缩
        .pipe(uglify())
        //处理后文件存放的路径
        .pipe(gulp.dest("./dist"));
    });
  

css合并压缩

• 先下载 gulp-cssnano npm install gulp-cssnano --save
• 代码

        //引入gulp
        var gulp = require('gulp');
        var uglify=require("gulp-uglify");
        var concat=require("gulp-concat");
        var cssnano=require("gulp-cssnano");
        
        // 创建任务
        // 第一个参数：任务名
        // 第二个参数：回调函数
        //处理app.css与test.css文件
        gulp.task("style",function(){
            //处理文件的路径
            gulp.src(["./*.css"])
            //concat合并 c参数为合并之后的文件名
            .pipe(concat("index.css"))
            //对css进行压缩
            .pipe(cssnano())
            //处理后文件存放的路径
            .pipe(gulp.dest("./dist"));
        })

html的压缩

• 下载gulp-htmlmin npm install gulp-htmlmin --save

• 代码

    //引入gulp
    var gulp = require('gulp');
    var uglify=require("gulp-uglify");
    var concat=require("gulp-concat");
    var cssnano=require("gulp-cssnano");
    var htmlmin=require("gulp-htmlmin");
    
    // 创建任务
    // 第一个参数：任务名
    // 第二个参数：回调函数
    //对html进行压缩
    gulp.task("html",function(){
        //处理文件的路径
        gulp.src(["./index.html"])
        //压缩html 需要传参数
        .pipe(htmlmin({collapseWhitespace:true}))
        //处理后文件存放的路径
        .pipe(gulp.dest('./dist'))
    })
  

gulp.watch监视文件变化，执行相应任务

• gulp.run 直接执行指定的任务

• 代码

        //引入gulp
        var gulp = require('gulp');
        var uglify=require("gulp-uglify");//js代码压缩
        var concat=require("gulp-concat");
        var cssnano=require("gulp-cssnano");//css代码压缩
        var htmlmin=require("gulp-htmlmin");//html压缩
        
        // 创建任务
        // 第一个参数：任务名
        // 第二个参数：回调函数
        //处理app.js与test.js文件
        gulp.task("script",function(){
        
            //处理文件的路径
            gulp.src(["./app.js","./test.js"])
            //concat合并 c参数为合并之后的文件名
            .pipe(concat("index.js"))
            //对app.js进行压缩
            .pipe(uglify())
            //处理后文件存放的路径
            .pipe(gulp.dest("./dist"));
        });
        
        gulp.task('mywatch',function(){
            //直接执行指定的任务
            gulp.run("script")
            //监视文件变化，然后执行相应的任务
            //参数1：需要监视的文件
            //参数2：要执行的任务
            gulp.watch(["./app.js","test.js"],['script'])
        })