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();

    已经压缩合并成功了

  • 相关阅读:
    1321棋盘问题
    2488A Knight's Journey
    1947Rebuilding Roads
    2057The Lost House
    2196Specialized Four-Digit Numbers
    /etc/sysctl.conf
    运维五步走
    虚拟机无法获得使用权问题
    ST/FC/SC/LC光纤的区别及适用场合;光纤适配器PC、APC和UPC区别
    Unity3D Kinect 控制人物模型
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/6520538.html
Copyright © 2011-2022 走看看