GulpJS 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
GulpJS 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
GulpJS 获得 2021 年度 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)

加载中
更多评论
暂无内容
发表了博客
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 removeComments: true 12 12 })) 13 13 .pipe(gulp.dest('dist')); 14 14 }); 15 15 ...

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

gulp

平常项目里用到的 简单设置 var gulp = require('gulp'); var commonPathPrefix = 'public/'; //需要编译的公共目录 //var imagemin = require('gulp-imagemin'); //var pngquant = require('imagemin-pngquant'); var uglify = require('gulp-uglify'); //var cleanCSS = require('gulp-clean-css'); //var htmlmin = require('gulp-htmlmin'); //var gulpJade = require('gulp-jade'); //var jade = require('jade'); //var j...

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 初始化npm npm install gulp gulp-util --save-dev //从本地把整个gulp文件夹拉过来 task 创建gulpfile.js文件 var gulp=require('gulp'); gulp.task('hello', function () { console.log('hello'); }); gulp.task('de...

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

Gulp

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

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

gulp

什么是gulp?   基于node的自动化构建工具 扩展:开发的时候分为2个节点一个是开发阶段 另一个是部署阶段 开发阶段:源文件不会被压缩 部署阶段:所有文件需要压缩 002、gulp能干什么? 1 自动压缩JS文件 2 自动压缩CSS文件 3 自动合并文件 4 自动编译sass 5 自动压缩图片 6 自动刷新浏览器 ........... 003、怎么安装gulp? 因为它基于nodeJS,因此需要先安装node环境 安装完成后,打开你的命令行窗口 输入: node -v 检测一下...

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

Gulp

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

0
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的自动任务运行器, 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式...

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下的,不免让人有些苦恼~~刚接触gulp没多久,弄了好久弄不出个所以然,还望大神们赐教~~...

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

npm安装报错,求指导

安装失败,求原因

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