zoukankan      html  css  js  c++  java
  • gulp

    Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

    Gulp安装

    全局安装:

    $ npm install -g gulp 

    1. 将安装包放在 /usr/local 下
    2. 可以直接在命令行里使用

    局部安装:

    $ npm install gulp --save-dev

    1. 将安装包放在 ./node_modules 下(运行npm时所在的目录)
    2. 可以通过 require() 来引入本地安装的包

    一般推荐全局安装。

    作为项目的开发依赖(devDependencies)安装

    $ npm install --save-dev gulp

    在项目根目录下创建一个名为 gulpfile.js 的文件

    var gulp = require('gulp');//跟node。js相似,也是需要什么就require什么

    //默认任务 gulp.task('default', function() { //这里输入默认任务的代码,function()也可以写成数组里面放需要默认执行的任务 });

    运行gulp

    /*全部执行(执行默认任务)*/
    $ gulp
    /*执行指定任务*/
    $ gulp 任务名

    安装gulp外挂

    安装外挂:

    $ npm install 外挂名

    载入外挂

    require(“外挂名”)

    建立任务

    gulp.task('任务名', function() {  
      return gulp.src('源路径')
        .pipe(gulp.dest('存放的路径'))
        .pipe(minifycss())//压缩css文件
        .pipe(gulp.dest('dist/assets/css'))//完成之后存放的位置
    });
    src:目标源路径
    dest:完成之后存放的位置

    看守

    为了能够看守档案,并在更动发生后执行相关任务,首先需要建立一个新的任务,使用gulp.watch来看守档案:

    gulp.task('watch', function() {
     
      // 看守所有.css档
      gulp.watch('src/*.css', ['任务名']);
     
      // 看守所有.js档
      gulp.watch('src/*.js', ['任务名']);
     
      // 看守所有图片档
      gulp.watch('src/*', ['任务名']);
     
    });
  • 相关阅读:
    JAVA设计模式之单例模式
    JAVA设计模式之单例模式
    数据库连接池
    数据库连接池
    DbUtils操作数据库
    DbUtils操作数据库
    Hadoop 问题之 Linux服务器jps报process information unavailable
    echarts ——纵坐标赋值
    echarts ——div没有设置样式图表就展示不出来!
    Elasticsearch+spring boot(一)
  • 原文地址:https://www.cnblogs.com/xuejiangjun/p/5006001.html
Copyright © 2011-2022 走看看