zoukankan      html  css  js  c++  java
  • gulp打包js

    在终端定位到你要创建目录的地方,输入

    sudo mkdir js

    创建文件夹,这个文件夹就是放你要压缩js文件的地方

    输入

    sudo vim gulpfile.js

    这个js就是写gulp所有的配置信息,

    在这个js中输入:

    var gulp=require ("gulp") //获取gulp
    
    var uglify=require ("gulp-uglify") //获取gulp-ublify组建
    
    gulp.task("script", function(){
        gulp.src("js/*.js") //找到js文件夹下的所有js
               .pipe(uglify()) //压缩文件
               .pipe(gulp.dest("dist/js")) //压缩完成后的文件另存到dist/js/目录下 
    })  
    gulp.task(name, fn) - 定义任务,第一个参数是任务名,第二个参数是任务内容。
    gulp.src(path) - 选择文件,传入参数是文件路径。
    gulp.dest(path) - 输出文件
    gulp.pipe() - 管道,你可以暂时将 pipe 理解为将操作加入执行队列  

    此时你还需要安装一个局域的gulp(我没安装各种报错)

    在gulplify.js的平级下打开终端,输入

    sudo cnpm install gulp      //此处不需要 “-g”

    然后安装gulp-uglify模板,命令如下:

    sudo cnpm install gulp-uglify

    输出如果没有扎眼的红色提示则表示安装成功

    这时输入

    gulp script

    如果输出中有Finished "script" after ...即表示压缩成功

    这时你去文件夹目录下便能看到一个叫dist的文件夹,这个文件夹下的js文件就是压缩成功后的代码

    当然这样如果js下的文件有变化就需要自己重新输入一遍gulp script,不是很人性化
    所以加入一条自动检测代码:

    gulp.task('auto', function () {
        // 监听文件修改,当文件被修改则执行 script 任务
        gulp.watch('js/*.js', ['script'])
    })

    当然watch跑起来就进入运行状态,此时你不能再输入别的操作,当然想要输入别的命令则需要关闭watch即可,命令:

    ctrl+C(Mac为Control +C)

    当然我们也可以把它定义成默认事件,只需要在终端输入gulp然后回车便可让程序运行,代码如下:

    gulp.task('default', ['script', 'auto']);

    最终版代码:

    var gulp = require ("gulp")
    
    var uglify = require("gulp-uglify")
    
    gulp.task("script", function(){
        gulp.src("js/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"))
    })
    gulp.task("auto",function(){
        gulp.watch("js/*js",["script"])
    })
    gulp.task("default",["script","auto"])
  • 相关阅读:
    Vuejs的一些总结
    vue.js中$emit的理解
    Vue.js——60分钟快速入门
    [ARC096E] Everything on It
    [ARC093E] Bichrome Spanning Tree
    [ARC093F] Dark Horse
    [ARC100F] Colorful Sequences
    卡特兰数 学习笔记
    【原】图练习
    【原】图
  • 原文地址:https://www.cnblogs.com/teersky/p/7251329.html
Copyright © 2011-2022 走看看