GulpJS 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
GulpJS 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
GulpJS 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
GulpJS 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
GulpJS 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 开发工具项目构建
开源组织
地区 不详
提 交 者 红薯
适用人群 未知
收录时间 2014-03-10

软件简介

从头编写HTML\CSS\Javascript是上个世纪的事情了,如今的JavaScript都是通过CoffeeScript这样的支持句法缩写的编辑器写成的。如果你希望写完JavaScript能够一个工具完成代码清理优化工作,Gulp 就是你的不二之选,GulpJS类似Ant或Maven之于Java。

示例代码:

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use all packages available on npm
gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);
展开阅读全文

代码

评论 (0)

加载中
更多评论
暂无内容
2016/08/12 23:37

Gulp Api & Gulp Cli

gulp 命令行(CLI)文档 gulp 只有你需要熟知的参数标记,其他所有的参数标记只在一些任务需要的时候使用。 -v 或 --version 会显示全局和项目本地所安装的 gulp 版本号 --require <module path> 将会在执行之前 reqiure 一个模块。这对于一些语言编译器或者需要其他应用的情况来说来说很有用。你可以使用多个--require...

0
0
发表于大前端专区
2016/07/15 11:58

Gulp

此库是利用Node.js的威力流,减少你的IO操作,让你的项目管理更加简单化

1
0
发表了博客
2018/03/05 18:22

gulp

1 'use strict'; 2 2 3 3 var gulp = require('gulp'); 4 4 5 5 //压缩html 6 6 var htmlmin = require('gulp-htmlmin'); 7 7 gulp.task('html', function(){ 8 8 gulp.src('./*.html') 9 9 .pipe(htmlmin({ 10 10 collapseWhitespace: true, 11 11 ...

0
0
发表于大前端专区
2016/07/13 15:33

gulp

gulp设置

0
2
发表了博客
2017/03/11 04:22

gulp

简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得配置node环境 Install npm install gulp-cli -g 全局安装gulp gulp --help 返回帮助信息 package.json npm init 初始......

0
0
发表了博客
2019/05/30 19:40

Gulp

一、Gulp:   Gulp 是基于node.js的一个前端自动化构建工具,开发这可以使用它构建自动化工作流程(前端集成开发环境)。 使用gulp你可以简化工作量,让你把重点放在功能的开发上,从而提高你的开发效率和工作质量。(gulp是基于node.js开发的) 二、Gulp的安装: 1、先安装node.js; 2、全局安装gulp 打开cmd 命令行窗口安...

0
0
发表了博客
2018/07/15 01:02

gulp

1. 什么是gulp gulp是可以自动化执行任务的工具 在平时开发的流程里面,一定有一些任务需要手工重复得执行,比如: 把文件从开发目录拷贝到生产目录 把多个 JS 或者 CSS 文件合并成一个文件 对JS文件和CSS进行压缩 把sass或者less文件编译成CSS 压缩图像文件 创建一个可以实时刷新页面内容的本地服务器 只要你觉得有些动作...

0
0
发表了博客
2018/03/13 20:21

gulp

什么是gulp?   基于node的自动化构建工具 扩展:开发的时候分为2个节点一个是开发阶段 另一个是部署阶段 开发阶段:源文件不会被压缩 部署阶段:所有文件需要压缩 002、gulp能干什么? 1 自动压缩JS文件 2 自动压缩CSS文件 3 自动合并文件 4 自动编译sass 5 自动压缩图片 6 自动刷新浏览器 ........... 003、怎么安装g...

0
0
发表了博客
2019/06/12 20:50

Gulp

Gulp 介绍 自动化构建工具,可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能。 特点 任务化 基于流(数据流io:input/output)操作 整个操作都是基于数据流进行操作 具备属于gulp的内存,所有的操作全部在gulp的内存当中 对应着输入流和输出流。会将数据通过src方法输入,通过des...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于DevOps专区
2018/12/24 15:34

gulp4监听不中断

gulpfile.js var gulp = require('gulp'); var postcss = require('gulp-postcss'); var sass = require('gulp-sass'); var autoprefixer = require('autoprefixer'); function styles() { return gulp.src('*.scss') .pipe(sass().on('error', sass.logError)) .pipe(postcss([autoprefix...

1
0
发表了问答
2017/03/07 17:08

gulp 合并压缩10个js文件 依赖的问题 求大神解决

我写了10个js的文件 相互之间有依赖关系 我想用gulp把这10个文件合并 压缩成一个js 但是这依赖关系如何解决? 我知道可以用require.js 但是那样是到html页面 script标签里src require.js 我想把requirejs 和我写的10个文件都合并到一个js文件 并且用require的功能把依赖关系解决了 最后html只引入一个index。js 请问如何...

4
0
发表了问答
2015/10/29 11:06

基于Node.js的自动化工具Gulp

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

2
3
发表了问答
2016/09/04 09:26

gulp如何生成一个空的项目文件目录

比如我有一个文件目录如下,但是还没有生成这些文件夹和文件,请问如果通过gulp来快速生成这些文件夹和文件 主目录文件夹project app/control/page.js app/module/ajax.js app/module/config.js index.html index.css

1
0
发表了问答
2015/04/08 11:21

Mac gulp安装

node -v v0.12.2 npm -v 2.7.4 sudo npm install -g gulp 安装gulp gulp -v -bash: gulp: command not found 有人知道怎么样解决吗?

3
0
发表了问答
2015/11/22 12:36

gulp生成图片的路径难道一旦确定就不能改变了?

第一次用gulp压缩图片club-pic时是生成在cover的img目录下,后来发现这图是公用的,就把生成路径改到了common目录下,并重命名为club01-pic,可是图片文件还是会生成到原来的路径之下。我看了下控制台,输出路径确实写的是common,不明白为什么会出现这个错误,望大神指导~~下面附上几张或许能够帮到你们的图~...

9
0
发表了问答
2015/11/14 17:59

gulp防止浏览器缓存的该如何搞?

本来听从了百度搜索上的建议使用了 gulp-rev gulp-rev-collector 这两个玩意来弄,可是由于我是边编写边编译而非上传前一口气构建,所以遇上了不少的问题~~详细情况一言难尽,望大神们指点,是否有其他简单的方式可以用来添加版本号?

2
0
发表了问答
2015/10/19 09:57

gulp如何在多个文件夹中分别合并同一文件夹里的css文件?

第一张图中实现了将src目录下的scss文件逐一编译并压缩到dist目录下,但离我想要的效果还有一些差距,我希望能够编译压缩的同时,将这三个css文件合并到一起去。而图二中加入了.pipe(concat('main.css'))语句,却发现它是将src目录下所有的scss文件编译压缩并合并到一起去了,不是只合并common下的,不免让人有些苦恼~~刚...

12
0
发表了问答
2015/08/09 11:05

npm安装报错,求指导

安装失败,求原因

12
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
0 评论
29 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部