gulp 订阅
GULP最初设计的目的是拟合力场,已经逐步发展成为模拟凝聚态物质的通用代码,可以模拟无机固体、团聚体、缺陷、表面、界面以及聚合物等。 展开全文
GULP最初设计的目的是拟合力场,已经逐步发展成为模拟凝聚态物质的通用代码,可以模拟无机固体、团聚体、缺陷、表面、界面以及聚合物等。
信息
外文名
General Utility Lattice Program
模拟的类型
(各维的都能模拟)
中文名
gulp
能量最小化
GULP里面比较出色的
gulpQuench your thirst for knowledge
At Google our mission is to organize the world's information and make it useful and accessible to our users. But any piece of information's usefulness derives, to a depressing degree, from the cognitive ability of the user who's using it. That's why we're pleased to announce Google Gulp (BETA)™ with Auto-Drink™ (LIMITED RELEASE), a line of "smart drinks" designed to maximize your surfing efficiency by making you more intelligent, and less thirsty.Think fruity. Think refreshing.Think a DNA scanner embedded in the lip of your bottle reading all 3 gigabytes of your base pair genetic data in a fraction of a second, fine-tuning your individual hormonal cocktail in real time using our patented Auto-Drink™ technology, and slamming a truckload of electrolytic neurotransmitter smart-drug stimulants past the blood-brain barrier to achieve maximum optimization of your soon-to-be-grateful cerebral cortex. Plus, it's low in carbs! And with flavors ranging from Beta Carroty to Glutamate Grape, you'll never run out of ways to quench your thirst for knowledge.How to get Gulped?You can pick up your own supply of this "limited release" product simply by turning in a used Gulp Cap at your local grocery store. How to get a Gulp Cap? Well, if you know someone who's already been "gulped," they can give you one. And if you don't know anyone who can give you one, don't worry – that just means you aren't cool. But very, very (very!) soon, you will be.
收起全文
精华内容
参与话题
问答
  • gulp入门

    2019-08-07 18:49:24
    自动化 - gulp 是一个工具集,它帮助你自动化处理那些在开发工作中遇到的繁琐的、耗时的任务。 多平台 - gulp 可以在主流的 IDE 中编译,使用它还可以处理 PHP,.NET,Node.js,Java等等。 强大生态 - 使用 npm 模块...

    简介

    来自官网的介绍:

    1. 自动化 - gulp 是一个工具集,它帮助你自动化处理那些在开发工作中遇到的繁琐的、耗时的任务。
    2. 多平台 - gulp 可以在主流的 IDE 中编译,使用它还可以处理 PHP,.NET,Node.js,Java等等。
    3. 强大生态 - 使用 npm 模块来处理你想做的事,里面有超过2000的用于流文件转换的插件。
    4. 简单 - 只提供最小 API,gulp 可以很容易的学习并简单使用。

    本文介绍的 gulp4 的入门级使用方法

    安装

    1. 卸载
    如果之前全局安装过 gulp 工具,可以使用如下命令卸载

    npm rm --global gulp
    

    2. 准备工作

    检查 node npm npx 的版本,如果没有安装,则使用命令 npm install -g [node|npm|npx] 来安装

    # shanpengfei @ spf in ~ [16:42:23]
    $ node --version
    v10.7.0
    
    # shanpengfei @ spf in ~ [16:42:31]
    $ npm --version
    6.10.0
    
    # shanpengfei @ spf in ~ [16:42:37]
    $ npx --version
    10.2.0
    
    

    3. 安装

    npm install --global gulp
    

    4. 创建项目

    # shanpengfei @ spf in ~/work/node.js/gulp [16:55:22]
    $ npx mkdirp first-gulp
    npx: 2 安装成功,用时 2.832 秒
    
    # shanpengfei @ spf in ~/work/node.js/gulp [16:55:51]
    $ cd first-gulp
    
    # shanpengfei @ spf in ~/work/node.js/gulp/first-gulp [16:56:19]
    $ npm init
    
    

    5. 安装依赖

    npm install --save-dev gulp
    

    6. 查看版本

    # shanpengfei @ spf in ~/work/node.js/gulp/first-gulp [16:58:22]
    $ gulp -v
    CLI version: 2.2.0
    Local version: 4.0.2
    

    7. 创建 gulpfile.js

    function defaultTask(cb) {
      // place code for your default task here
      cb();
    }
    
    exports.default = defaultTask
    

    8. 运行

    # shanpengfei @ spf in ~/work/node.js/gulp/first-gulp [16:58:27]
    $ gulp
    [17:02:27] Using gulpfile ~/work/node.js/gulp/first-gulp/gulpfile.js
    [17:02:27] Starting 'default'...
    [17:02:27] Finished 'default' after 2.94 ms
    
    

    结果是默认的任务运行,但是什么事也不做。

    展开全文
  • gulp工具----经典详细教程

    千次阅读 2018-06-09 22:45:06
    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且...

    简介:

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

    gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

    gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

    本示例以gulp-less为例(将less编译成css的gulp插件)展示gulp的常规用法,只要我们学会使用一个gulp插件后,其他插件就差看看其帮助文档了。让我们一起来学习gulp吧! ^_^

    gulp常用地址:

    gulp官方网址:http://gulpjs.com

    gulp插件地址:http://gulpjs.com/plugins

    gulp 官方API:https://github.com/gulpjs/gulp/blob/master/docs/API.md

    gulp 中文API:http://www.ydcss.com/archives/424

    目录:

    在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识。首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可。

    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

    1、安装nodejs

    1.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;

    1.2、安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)。

    2、使用命令行(如果你熟悉命令行,可以直接跳到第3步

    2.1、说明:什么是命令行?命令行在OSX是终端(Terminal),在windows是命令提示符(Command Prompt);

    2.2、注:之后操作都是在windows系统下;

    2.3、简单介绍gulp在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):

    node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

    npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,那它有什么用呢?稍后解释

    cd定位到目录,用法:cd + 路径 ;

    dir列出文件列表;

    cls清空命令提示符窗口内容。

    3、npm介绍

    3.1、说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

    3.2、使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]

    3.2.1、<name>:node插件名称。例:npm install gulp-less --save-dev

    3.2.2、-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

    3.2.3、--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

    3.2.4、-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。

    3.2.5、为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包,npm install --production只下载dependencies节点的包)。

    3.3、使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]  PS:不要直接删除本地插件包

    3.3.1、删除全部插件:npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

    3.3.2、借助rimraf:npm install rimraf -g 用法:rimraf node_modules

    3.4、使用npm更新插件:npm update <name> [-g] [--save-dev]

    3.4.1、更新全部插件:npm update [--save-dev]

    3.5、查看npm帮助:npm help

    3.6、当前目录已安装插件:npm list

    PS:npm安装插件过程:从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),解决办法往下看↓↓↓↓↓↓。

    4、选装cnpm

    4.1、说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。32个!来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

    4.2、官方网址:http://npm.taobao.org

    4.3、安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

    注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

    5、全局安装gulp

    5.1、说明:全局安装gulp目的是为了通过她执行gulp任务;

    5.2、安装:命令提示符执行cnpm install gulp -g

    5.3、查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

    6、新建package.json文件

    6.1、说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

    6.2、它是这样一个json文件(注意:json文件内是不能写注释的,复制下列内容请删除注释)

    6.3、当然我们可以手动新建这个配置文件,但是作为一名有志青年,我们应该使用更为效率的方法:命令提示符执行cnpm init

    6.4、查看package.json帮助文档,命令提示符执行cnpm help package.json

    特别注意:package.json是一个普通json文件,所以不能添加任何注释。参看 http://www.zhihu.com/question/23004511

    7、本地安装gulp插件

    7.1、安装:定位目录命令后提示符执行cnpm install --save-dev

    7.2、本示例以gulp-less为例(编译less文件),命令提示符执行cnpm install gulp-less --save-dev

    7.3、将会安装在node_modules的gulp-less目录下,该目录下有一个gulp-less的使用帮助文档README.md;

    7.4、为了能正常使用,我们还得本地安装gulp:cnpm install gulp --save-dev

    PS:细心的你可能会发现,我们全局安装了gulp,项目也安装了gulp,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

    8、新建gulpfile.js文件(重要)

    8.1、说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。

    8.2、它大概是这样一个js文件(更多插件配置请查看这里):

    8.3、该示例文件请下载查看

    9、运行gulp

    9.1、说明:命令提示符执行gulp 任务名称

    9.2、编译less:命令提示符执行gulp testLess

    9.3、当执行gulp defaultgulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

    10、使用webstorm运行gulp任务

    10.1、说明:使用webstorm可视化运行gulp任务;

    10.2、使用方法:将项目导入webstorm,右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口,若出现”No task found”,选择右键”Reload tasks”,双击运行即可。

    11、总结

    11.1、安装nodejs;

    11.2、新建package.json文件;

    11.3、全局和本地安装gulp;

    11.4、安装gulp插件;

    11.5、新建gulpfile.js文件;

    11.6、通过命令提示符运行gulp任务。

    转自:http://www.ydcss.com/archives/18

    展开全文
  • gulp4.0入门, 看这一篇就够了

    千次阅读 2019-06-24 16:50:39
    之前我们讲了gulp3.0, 这篇引入gulp4.0, 4.0相比3.0有一些改变的地方: gulp3.0压缩顺序默认是顺序执行的,4.0引入压缩并行的处理方式: gulp.series|4.0 依赖顺序执行 gulp.parallel|4.0 多个依赖嵌套'html',...

    前言

    之前我们讲了gulp3.0, 这篇引入gulp4.0, 4.0相比3.0有一些改变的地方:

    gulp3.0压缩顺序默认是顺序执行的,4.0引入压缩并行的处理方式:

    gulp.series|4.0 依赖顺序执行
    
    gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

    因为之前一步步说了怎么压缩js\ css\image等,此处直接上代码:

    gulpfile.js:

    const gulp=require('gulp');
    const uglify=require('gulp-uglify');
    const concat=require('gulp-concat');
    const babel=require('gulp-babel');
    const sourcemaps=require('gulp-sourcemaps');
    const cssmin=require('gulp-cssmin');
    const imagemin=require('gulp-imagemin');
    const htmlmin = require('gulp-htmlmin');
    const connect=require('gulp-connect');
    const clean=require('gulp-clean');
    const revCollector = require('gulp-rev-collector');
    
    const js_path=['./src/js/**/*.js'];
    
    // 压缩html
    gulp.task('html',function(){
        const options = {
            collapseWhitespace:true,
            collapseBooleanAttributes:true,
            removeComments:true,
            removeEmptyAttributes:true, //清除所有的空属性
            removeScriptTypeAttributes:true,
            removeStyleLinkTypeAttributes:true,
            minifyJS:true,//压缩html中的javascript代码。
            minifyCSS:true //压缩html中的css代码。
        };
        return gulp.src('./src/*.html')
        .pipe(htmlmin(options))
        .pipe(revCollector({
            replaceReved:true
        }))
        .pipe(gulp.dest('./dist'))
        .pipe(connect.reload());
    })
    
    // 压缩js
    gulp.task('js', ()=>{
      return gulp.src(js_path)
        .pipe(sourcemaps.init())
        // babel编译
        .pipe(babel({
            presets: ['@babel/env']
        }))
        // concat会作合并,合并为1个js
        .pipe(concat('bundle.min.js'))    
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist/js/'))
        .pipe(connect.reload());
    });
    
    // 压缩style-css
    gulp.task('style', ()=>{
        return gulp
          .src(['./src/css/**/*.css'])
          .pipe(concat('style.min.css'))
           // cssmin css压缩
          .pipe(cssmin())
          .pipe(gulp.dest('./dist/css/'))
          .pipe(connect.reload());
    });
    
    // 压缩images
    gulp.task('images', ()=>{
        return gulp
            .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png'])
            .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({propressive: true}),
            imagemin.optipng({optimizationLevel: 5})
            ]))
            .pipe(gulp.dest('./dist/img/'));
    });
    
    gulp.task('watchs',function(){
        gulp.watch('./src/*.html', gulp.series('html'));
        gulp.watch('./src/css/**/*.css', gulp.series('style'));
        gulp.watch('./src/js/**/*.js', gulp.series('js'));
    });
    
    gulp.task('connect:app',function(){
        connect.server({
            root:'src',//根目录
            // ip:'192.168.3.162', 默认localhost
            livereload:true,//自动更新
            port:9999//端口
        })
    })
    
    gulp.task('connect:dist',function(cb){
        connect.server({
            root:'src',
            livereload:true,
            port:9999
        })
    
        cb(); //执行回调,表示这个异步任务已经完成,起通作用,这样会执行下个任务
    })
    
    gulp.task('clean:app', function() {
        return gulp.src('dist', {read: false})
            .pipe(clean());
    })
    
    //gulp.series|4.0 依赖顺序执行
    //gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行
    gulp.task('default', gulp.series(gulp.parallel('html','style','js','images')));
    
    gulp.task('init', gulp.series('clean:app', gulp.parallel('html','style','js','images')));
    
    //启动任务connect:app服务,并监控变化
    gulp.task('dev', gulp.series('init', 'connect:app', 'watchs'));
    
    // 生成打包文件
    gulp.task('build', gulp.series('init'));
    
    //启动任务connect:dist服务,生成打包文件后,监控其变化
    gulp.task('server', gulp.series('connect:dist', 'build', 'watchs'));
    

    package.json:

    {
      "name": "gulp-project4.0",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "dev": "gulp dev",
        "build": "gulp build",
        "server": "gulp server"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "@babel/core": "^7.4.5",
        "@babel/preset-env": "^7.4.5",
        "gulp": "^4.0.2",
        "gulp-babel": "^8.0.0",
        "gulp-clean": "^0.4.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect": "^5.7.0",
        "gulp-cssmin": "^0.2.0",
        "gulp-htmlmin": "^5.0.1",
        "gulp-imagemin": "^6.0.0",
        "gulp-rev-collector": "^1.3.1",
        "gulp-sourcemaps": "^2.6.5",
        "gulp-uglify": "^3.0.2"
      }
    }
    

    执行gulp, 会执行default任务

    执行npm run dev, 执行dev任务,其它类似

    展开全文
  • 什么是gulp,怎么使用gulp

    万次阅读 多人点赞 2017-12-28 21:06:55
    Gulp 是基于node.js的一个前端自动化构建工具,开发这可以使用它构建自动化工作流程(前端集成开发环境)。 使用gulp你可以简化工作量,让你把重点放在功能的开发上,从而提高你的开发效率和工作质量。 例如:你...

    <———
    在这之前,你肯定会注意到上面箭头所指的位置,那么你一定会看见,文章外面的大拇指图标,动动你的手指,就能点一下它,表示你很喜欢这篇文章。

    正题:

    什么是gulp:
    Gulp 是基于node.js的一个前端自动化构建工具,开发这可以使用它构建自动化工作流程(前端集成开发环境)。
    使用gulp你可以简化工作量,让你把重点放在功能的开发上,从而提高你的开发效率和工作质量。
    例如:你可以用gulp可以网页自动刷新,和MVVM开发模式很相似,如果你对vue.js有所了解的话,那么你一定不会陌生。你也可以使用gulp对sass进行预处理、代码检测、图片优化压缩、只需要一个简单的指令就能全部完成。

    由于gulp是基于node.js开发的,所以你在使用gulp之前,必须要先安装node。然后你可以打开node服务器并执行 npm install gulp -g 全局安装gulp.
    之后你需要创建一个工程目录,通过dos命令,进入刚创建好的工程目录,
    然后执行npm init 创建package.json文件. 这个文件保存着你目录下的项目模块的相关信息。可以把它想象成你所用到模块儿的一个目录.
    然后执行npm intall gulp --save-dev 本地安装gulp
    在工程目录下手动创建gulpfile.js文件。
    然后你可以在gulpfile.js里最先引入gulp模块。

    var gulp = require("gulp");
    
    gulp.task('default',function(){
        console.log('gulp启动成功');//测试gulp是否启动
    })

    之后我们去dos命令里执行 gulp
    你会看到‘gulp启动成功’。这就表明,你可以正常使用gulp了。

    之后就是引入各个需要的压缩的模块。

    加载htmlmin模块:

    var htmlmin = require('gulp-htmlmin');
    gulp.task('html',function(){
        gulp.src('*.html')
        .pipr(htmlmin({
            collapseWhitespace : true,
            removeComments : true
        }))
        //最后把你建立的html文件压缩到自动创建的dist文件里;
        .pipe(gulp.dest('dist'))
    })

    如果你是使用sass预编译的css,那么gulp可以帮你预处理sass:

    var scss = require('gulp-sass');
    var cssnano = require('gulp-cssnano');
    //因为我用的是scss,所以这里注册任务写成了scss;
    gulp.task('scss',function(){
        gulp.src('*.scss')
        .pipe(scss())
        .pipe(gulp.dest("dist"))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css'))
    });

    图片处理也是一样:

    var imagemin = require('gulp-imagemin');
    var cache = require('gulp-cache');
    gulp.task('image',function(){
        gulp.src('img/*.{jpg,pnp,gif}')//要处理的图片目录为img目录下的所有的.jpg .png .gif 格式的图片;
        .pipe(cache(imagemin({
            progressive : true,//是否渐进的优化
            svgoPlugins : [{removeViewBox:false}],//svgo插件是否删除幻灯片
            interlaced : true //是否各行扫描
        })))
        .pipe(gulp.dest('dist/img'))
    });

    加载js丑化模块

    var uglify = require('gulp-uglify');
    gulp.task('js',function(){
        gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dist('dist/js'))
    });

    然后你只需要监听你编写的那些文件们,就可以实时的改变压缩到dist文件里的文件代码了。

    gulp.task('watch',['scss','js','html','image'],function(){
        gulp.watch('*.scss',['scss']);
        gulp.watch('js/*.js',['js']);
        gulp.watch('img/*.*',['image']);
        gulp.watch('*.html',['html']);
    })

    最后你就可以在dos命令里执行gulp watch 按下回车,就可以开始你的工程了.

    当然你也可以注册一个只执行gulp 的默认任务 也并非什么难事:

    gulp.task("default",["watch","html","scss","image","js"],function(){
        gulp.start("watch","html","scss","image","js")
    })

    end

    展开全文
  • 1.gulp是什么? Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发环境)。例如:网页自动刷新,CSS预处理,代码检测,图片压缩等功能,只需要简单的命令行就可以全部完成。...
  • Gulp

    2020-03-10 15:32:28
    四、Gulp的使用 1. 使用流程 下载 Gulp 到项目中: npm install gulp 如果安装慢,可以切换成淘宝源: npm set registry https://registry.npm.taobao.org/ 在项目根目录下简历 gulpfile.js 文件 重构项目文件...
  • gulp

    2020-11-16 22:30:34
    GULP gulp 是一个项目开发的 自动化打包构建工具 基于 node 环境来运行的 什么是自动化打包构建工具 比如 我们在开发的过程中,会写到 js 文件,css 文件,等等 我们的项目如果想上线,那么一定要体积小一点,...
  • gulp 自动化更新版本号

    千次阅读 2019-01-04 15:59:28
    文章目录描述步骤1....安装gulp-asset-rev,这是一个gulp.js的插件,通过添加内容哈希来替换文件的名称 cnpm i gulp-asset-rev --save-dev gulpfile.js文件配置如下所示 var gulp = require('...
  • Gulp与WebPack有区别吗?如果有,有什么区别?

    千次阅读 多人点赞 2020-03-22 12:33:23
    Gulp与webpack有区别吗?如果有,有什么区别? 可以这么说,它们既有区别,也有相似… 先来具体看一下它们不同的概念: (1)Gulp:        Gulp是一个自动化构建工具,强调的是...
  • Gulp:新一代前端构建利器

    万次阅读 2014-03-08 23:27:02
    1、什么是Gulp gulp.js 是一种基于流的,代码优于配置的新一代构建工具。 Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建。 2、Gulp特性 使用方便 通过代码...
  • 项目使用gulp来处理日常构建...每次变动文件进行编译,不再全量编译。 解决这个问题主要使用gulp-watch插件,github地址、npm地址 我比较喜欢使用gulp-debug查看当前管道输出,很方便,npm地址 接下在就直接...
  • gulp
  • 近日在学习《Web前端自动化构建》,关于gulp的css压缩插件,书中先后提到了两个,分别是gulp-cssnano和gulp-minify-css,而执行npm install gulp-minify-css –save-dev时,控制台提示如下: npm WARN deprecated ...
  • 全局安装gulp $yarn global add gulp 或 $npm install --global gulp 初始化项目(或在已有项目中初始化,生产package.json文件) 注:“entry point” 文件入口为 gulpfile.js 引入gulp依赖 $yarn add ...
  • 或者一些多文件夹层级的文件处理,需要提取某一层级的文件,或者把所有层级的文件全部提取出来,放在一个层级里面;甚至有些管道需要使用条件处理,等等; 所以我们这里介绍,gulp-filter、gulp-f...
  • 在实际工程中,借助自动化工具可以很方便地实现图片的压缩,本文主要介绍gulp工作流下图片的压缩方法。 1.基本使用方式对比 gulp-imagemin 1.功能:压缩图片 2.支持的图片格式:png,jpg,svg和gif 3.使用方式: ...
  • 使用gulp-minify-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存。重要:gulp-minify-css已经被废弃,请使用gulp-clean-css,用法一致。 1、安装nodejs/全局安装gulp/本地安装gulp/创建package....
  • 功能说明:合并javascript文件,减少网络请求。 1、本地安装gulp-concat$>cnpm install gulp-concat --save-dev2、配置gulpfile.jsvar gulp = require('gulp'), concat = require('gulp-concat');gulp.task('...
  • gulp开发团队一直计划弃用gulp-util,因为它只是一堆模块,大概6752个modules,其中许多都使用过了较低版本的Vinyl, 低版本的Vinyl是不兼容的,但仍被许多插件使用,然而Vinyl的v2版不会附带gulp-util,所以开发团队在...
  • 通过使用 gulp-changed 可以让更改过的文件传递过管道。这可以大大加快连续多次的运行。插件安装$>cnpm install gulp-changed --save-dev使用方法changed需要放在rename方法后面var gulp = require('gulp'), ...
  • 需求说明:压缩图片并且只是压缩修改过的图片。因为压缩图片比较耗时,我们需要压缩修改的图片,没有修改的直接从缓存中读取。
  • gulp详细入门教程传送门: ... npm install –save-dev gulp gulp-imagemin gulp-tinypng-compress gulp-tinypng-nokey 二、配置gulpfile.jsvar gulp = require
  • gulp常用插件-gulp-clean-css

    千次阅读 2016-10-19 23:36:20
    使用gulp-clean-css压缩css文件,减小文件大小,并给引用url添加版本号避免缓存。
  • gulp插件(2) - gulp-clean-css(压缩CSS文件)

    千次阅读 2017-02-28 22:37:54
    功能说明:压缩css文件,并给引用URL添加版本号避免缓存,gulp-minify-css已废弃,使用gulp-clean-css,用法一致 1、本地安装gulp-minify-css$>cnpm install gulp-minify-css --save-dev2、配置gulpfile.jsvar gulp ...
  • gulp插件(6) - gulp-rename(文件更名)

    千次阅读 2017-03-01 12:00:16
    功能说明:修改文件名,例如将demo.css修改为demo.min....插件安装$>cnpm install gulp-rename --save-dev使用方法CSS压缩后进行文件更名,同时进行sourcemap及autoprefixer的自动生成var gulp = require('gulp'), so
  • 在实际开发过程中,我们需要使用一些工具来带打印出我们的文件,所以我们需要使用gulp-print这个插件,这个插件有一个回调,回调的参数是当前处理的文件路径,当然在某些时候,我们也需要修改json配置,所以我们需要...
  • 编译css预处理;压缩css 一、gulp-autoprefixer等模块安装 npm i -D gulp-less gulp-autoprefixer gulp-csso 二、gulp-autoprefixer等参数说明 /** * @param option {Object} * @param option.browsers 浏览器...
  • gulp教程之gulp-uglify(压缩文件

    千次阅读 2016-11-24 11:09:07
    为了尊重作者原创写作,和... 简介: 使用gulp-uglify压缩javascript文件,减小文件大小。 1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1.1、gulp基本使用还未掌握?请参看: g
  • 功能说明:删除文件及文件夹,在执行打包的时候,一般都需要先清理目标文件夹,以保证每次打包时,都是最新的文件
  • gulp--gulp-useref

    2017-06-23 17:10:57
    gulp-useref的作用 它可以把html里零碎的这些引入合并成一个文件,但是它不负责代码压缩。 var gulp = require('gulp'), useref = require('gulp-useref'); gulp.task('default', function () { ...

空空如也

1 2 3 4 5 ... 20
收藏数 35,582
精华内容 14,232
关键字:

gulp