gulp使用配置

关键词：

gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。

1.安装gulp

npm install -g gulp

2.切换到项目文件夹后创建gulpfile.js  如下：

var gulp = require(‘gulp‘);
var uglify = require(‘gulp-uglify‘);
var minifycss = require(‘gulp-minify-css‘);
var concat = require(‘gulp-concat‘);
var rename = require(‘gulp-rename‘);

gulp.task(‘minifyjs‘,function() {
	return gulp.src([
		‘static/scripts/jquery.js‘,
		‘static/scripts/moment.js‘,
		‘static/scripts/socket.io.js‘,
		‘static/scripts/app.js‘,
		‘static/scripts/app.request.js‘,
		‘static/scripts/app.login.js‘,
		‘static/scripts/app.chat.js‘,
		‘static/scripts/app.init.js‘
	]).pipe(concat(‘all.js‘)).pipe(uglify()).pipe(gulp.dest(‘static/scripts/‘));  
});

gulp.task(‘minifycss‘,function() {
	return gulp.src([
		‘static/styles/zee.css‘,
		‘static/styles/app.css‘
	]).pipe(concat(‘all.css‘)).pipe(minifycss()).pipe(gulp.dest(‘static/styles‘));
});


gulp.task(‘default‘, function() {
	gulp.start(‘minifyjs‘, ‘minifycss‘);
});

gulp.task(‘watch‘,function() {
	var watcher = gulp.watch([
		‘static/scripts/jquery.js‘,
		‘static/scripts/moment.js‘,
		‘static/scripts/socket.io.js‘,
		‘static/scripts/app.js‘,
		‘static/scripts/app.request.js‘,
		‘static/scripts/app.login.js‘,
		‘static/scripts/app.chat.js‘,
		‘static/scripts/app.init.js‘,
		‘static/styles/zee.css‘,
		‘static/styles/app.css‘
	]);
	watcher.on(‘change‘, function(event) {
		gulp.start(‘minifyjs‘, ‘minifycss‘);
	});
});

3. 安装插件

npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev

4.进入终端执行命令

gulp
gulp watch #这个是用来监听文件改动的

你如何配置和使用 gulp eslint 任务？

】你如何配置和使用gulpeslint任务？【英文标题】：Howdoyouconfigureandusethegulpeslinttask?【发布时间】：2019-01-3000:32:08【问题描述】：我正在尝试让gulp-eslint工作。这是我的package.json："devDependencies":"eslint":"^5.4.0","eslint-plugin-babel":"^5.1.0",... 查看详情

gulp的使用之gulpfile.js文件的配置

...站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。而gulpfile.js就是帮助gulp实现自动化管理项目功能的核心文件.  ... 查看详情

gulp配置

首先，这是项目的结构：在用npm等工具的支持下，安装各种依赖包：接着开始配置一个路径文件，方便使用：最后再配置需要的功能：  查看详情

gulp使用案例

1、gulp配置：//引入gulpvargulp=require(‘gulp‘);varwatch=require(‘gulp-watch‘),//导入所有gulp需要的模块spriter=require(‘gulp-css-spriter‘),spritesmith=require(‘gulp.spritesmith‘),imagemin=require(‘gulp-imagemin‘),png 查看详情

gulp配置版本号教程之gulp-rev-append

简介：使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存。1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程1.2、本示例目录结构如下：2、... 查看详情

gulp-concat：多个外部“配置”文件，可能吗？

...想通过frontend-maven-plugin更新/改进我们当前的构建过程以使用gulp，并且我想知道是否可以使用外部配置文件来告诉gul 查看详情

实战环境搭建gulp

实战环境搭建1.1环境运行环境nodejs使用gulp自动化编译scss，js等使用bower管理依赖插件使用requirejs作为模块加载器使用bootstrapcss作为样式框架依赖jquery，jquery-ui两个库1.2项目目录node_modules为依赖模块文件.bowerrc为bower配置文件,包含... 查看详情

gulp的安装和配置

...lp及其插件。第一步：建了一个Gulp文件夹，保存插件用于使用第二步：进入nodejs环境下安装cnpm淘宝镜像文件（若出错，则将之前存在的.npmrc删掉再安装该镜像文件）       npminstall-gcnp 查看详情

gulp-less使用

简介：　　使用gulp-less插件将less文件编译成CSS。1、安装gulp-less在命令行里使用npminstallgulp-less--save-dev;2、配置gulpFile.js2.1基本使用vargulp=require(‘gulp‘),//获取gulp模块less=require(‘gulp-less‘);//获取gulp-less插件gulp.task(‘testLess‘, 查看详情

编译Angular2 TS时如何配置gulp-typescript以与JSPM一起使用

】编译Angular2TS时如何配置gulp-typescript以与JSPM一起使用【英文标题】：Howtoconfiguregulp-typescripttoworkwithJSPMwhentranspilingAngular2TS【发布时间】：2016-06-1710:33:30【问题描述】：我们有一个如下所示的gulp脚本（仅显示相关部分）：constgulp=... 查看详情

gulp常用插件之gulp-uglify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-uglify这是一款使用UglifyJS缩小js文件。更多使用文档请点击访问gulp-uglify工具官网。安装一键安装不多解释npminstall--save-devgulp-uglify使用vargulp=require('gulp');varuglify=require('gul... 查看详情

gulp解决跨域的配置文件

//引入插件vargulp=require(‘gulp‘);//varProxy=require(‘gulp-connect-proxy‘);varconnect=require(‘gulp-connect‘);varproxy=require(‘http-proxy-middleware‘);//使用connect启动一个Web服务器gulp.task(‘connect‘,function(){ 查看详情

gulp外挂rename的使用

安装和使用就不详细说了。前面有。gulpfile.js的配置vargulp=require(‘gulp‘),rename=require(‘gulp-rename‘),//记得先下载插件哦uglify=require("gulp-uglify");gulp.task(‘rename‘,function(){gulp.src(‘src/js/main.js‘).pipe(uglify())//压缩. 查看详情

gulp新手使用

Gulp注意：gulp依赖于nodejs，在安装前要确保已经安装node环境，如为安装查看《windows系统下nodejs安装及环境配置》安装node环境。1.全局安装在命令行执行下边命令，进行全局安装：npminstall--globalgulp检测gulp是否安装成功，执行下边... 查看详情

npmandegulpcmd

在学习前，先谈谈大致使用gulp的步骤，给读者以初步的认识。首先当然是安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息（定义gulp任务）... 查看详情

gulp的使用

1.安装node.js2.全局安装gulp.jsnpminstallgulp-g3.在项目本地根目录再安装(通过黑窗口安装)npminstall--save-devgulp/或者npminstallgulp,项目本地会自动生成package.json配置文件4.在项目根目录创建gulpfile.js文件5,在gulpfile.js中写vargulp=require(‘gulp‘);... 查看详情

Gulp 循环配置文件和合并任务...慢

...【发布时间】：2015-06-2310:09:19【问题描述】：我正在尝试使用gulp和config.json文件自动执行我的js任务，因此我不需要打开gulpfile.js，而只需打开配置文件。我的代码看起来不错并且正在运行……但是Gulp在10秒内完成了任务！我正... 查看详情

gulp使用

Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，以其简洁的配置和卓越的性能成为目前主流的构建工具。全局安装npminstall-ggulp1、本地安装gulp进入项目根目录执行npminstallgulp--save-dev（添加--save-dev会在... 查看详情