zoukankan      html  css  js  c++  java
  • gulp初探

    很多人都在用grunt和gulp,我现在连github都不用。。为了说自己是个前端,还是搞搞gulp吧

    nodejs很多人都会安装,这个不是问题

    npm模块现在好像是自带的。。我忘了。。

    先全局安装下gulp

    npm install gulp -g

    好像默认到user下的了。

    然后在D盘找个文件夹test。

    安装局部的gulp

    再安装两个模块gulp-uglify,gulp-concat(合并。压缩)

    npm install gulp --save-dev

    案例:合并压缩js文件夹下的两个js,压缩后的文件放在build目录下,命名为all.min.css

    js下的index.js

    1 js下的main.js
    2 
    3 var main=main || {};
    4 main.test=function(argument){
    5     console.log("main test");
    6 }
    7 me.test();

    gulpfile是用来处理操作的文件,我们执行压缩和合并命令

     1 var gulp =require('gulp');
     2 //加载合并和压缩组件
     3 var uglify=require('gulp-uglify');
     4 var concat=require("gulp-concat");
     5 
     6 /*
     7 var paths={
     8     script:['js/index.js','js/main.js']
     9 }
    10 */
    11 gulp.task('default',function(){
    12     //也可以指定path
    13     gulp.src("js/*.js")
    14         .pipe(uglify())
    15         .pipe(concat('all.min.js'))
    16         .pipe(gulp.dest('build'));
    17 })

    说明下,build的all.min.js文件我们需要先创建,内容为空就行了

    在cmd中进入test的目录,然后运行

    gulp

    会提示成功,我们再去bulid下的all.min.js看看

    1 var index={};index={test:function(e){console.log("test")}},index.test();
    2 var main=main||{};main.test=function(n){console.log("main test")},me.test();

    已经压缩合并成功了

  • 相关阅读:
    学习H5一周随笔
    vue项目中vux的使用
    git操作常用命令
    vue2.0 实现全选和全不选
    鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
    js编写当天简单日历
    UIView.frame的骗局
    设计模式笔记感悟
    实用图像处理入门
    实用图像处理入门
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/6520538.html
Copyright © 2011-2022 走看看