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/*', ['任务名']);
     
    });
  • 相关阅读:
    影响cpu性能的因素有哪些?
    linux系统中 SElinux安全子系统
    linux 系统中个人用户主页功能
    理解 Segmentation fault
    VI高级命令集锦
    How to be a Star 怎样成为明星?
    名词解释:DEADBEEF
    Unix还能走多远?
    Awk 实例,第 1 部分
    77年出生的朋友,你们过的还好吗?
  • 原文地址:https://www.cnblogs.com/xuejiangjun/p/5006001.html
Copyright © 2011-2022 走看看