glup简单应用---gulpfile.js

//npm install gulp -g (global环境)
//npm install gulp --save-dev (项目环境)
//在项目中install需要的gulp插件,一般只压缩的话需要
//npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
//以下require需要的module
var gulp = require(‘gulp‘),
	minifycss = require(‘gulp-minify-css‘),
	minifyhtml = require(‘gulp-minify-html‘),
	concat = require(‘gulp-concat‘),
	uglify = require(‘gulp-uglify‘),
	rename = require(‘gulp-rename‘),
	del = require(‘del‘);
//压缩JS
gulp.task(‘minify‘, function() {
	gulp.src(‘./src/js/*.js‘)
		.pipe(concat(‘main.js‘)) //合并所有js到main.js
		.pipe(rename({
			suffix: ‘.min‘
		})) //rename压缩后的文件名 让main.js变成main.min.js
		.pipe(uglify()) //执行压缩
		.pipe(gulp.dest(‘./build/js‘))
});
//压缩CSS
gulp.task(‘minifycss‘, function() {
	return gulp.src(‘./src/css/*.css‘) //压缩的文件
		.pipe(minifycss())
		.pipe(gulp.dest(‘./build/css‘)); //输出文件夹
});
//压缩HTML
gulp.task(‘minifyhtml‘, function() {
	gulp.src(‘./src/html/*.html‘) // 要压缩的html文件
		.pipe(minifyhtml()) //压缩
		.pipe(gulp.dest(‘./build/html‘));
});
//执行压缩前,先删除文件夹里的内容
//执行删除的时候不要把目录定在build的子目录中,windows删除目录的同时会报错
gulp.task(‘clean‘, function(cb) {
	del([‘build/css‘, ‘build/js‘], cb)
});
//在任务数组中放上面要执行的任务
gulp.task(‘default‘, [‘clean‘, ‘minify‘, ‘minifycss‘, ‘minifyhtml‘]);

  

时间: 2024-10-10 05:22:26

glup简单应用---gulpfile.js的相关文章

简单的gulpfile.js参数配置

这里gulp安装和模块安装我就不提了,先简单写一些配置函数 for example /** * Created by yumeiqiang on 16/7/26. */var gulp = require('gulp');var uglify = require('gulp-uglify');// 获取 uglify 模块(用于压缩 js)var minifyCSS = require('gulp-minify-css');// 获取 minify-css 模块(用于压缩 CSS)var sas

如何在修改 gulpfile.js 文件后自动重启 gulp?

gulp 非常好用,编写好 gulpfile.js 文件后,一般情况下在命令行用 gulp 就能启动开发环境,大大简化了开发流程.但是有一个问题没有解决,就是编写 gulpfile.js 文件过程中,如果这个时候 gulp 已经启动,修改 gulpfile.js 文件,进程并不会变化,我们希望 gulpfile.js 文件修改后,gulp 进程能够自动重启 我们接下去以这个脚手架 gulp-simple 为例 原始的 gulpfile.js 文件如下: const gulp = require(

【转】简单了介绍js中的一些概念(词法结构) 和 数据类型(部分)。

1 , javascript字符集: javascript采用的是Unicode字符集编码. 为什么要采用这个编码呢? 原因很简单,16位的Unicode编码可以表示地球人的任何书面语言.这是语言 国际化的一个重要特征.(大家也许见过用中文写脚本,比如:function 我的函数() {} ); Javascript中每个字符都是用2个字节表示的.(因为是16位编码) 2 ,大小写敏感: js是一种区分大小写的语言. 注意下:以前我也犯过的错误. HTML是不区分大小写的.经常看见有人这么写, 

node入门(二)——gulpfile.js初探

本文关于gulpfile.js怎么写,利于完成个性化需求.本文开发环境默认已安装node,详情参考<node入门(一)——安装>. 一.安装gulp npm install -g gulp 二.进入项目根目录,创建package.json文件 npm init 现在项目目录下新增了package.json文件,内容如下: 三.在package.json里增加devDependencies配置项,告诉node在install时要下载哪些插件模块,例如下面是要加载gulp-less插件: gulp

gulp运行及gulpfile.js配置

控制台输入,运行gulp gulp default gulpfile.js var gulp = require('gulp'), //获取gulp htmlmin = require("gulp-htmlmin"), //压缩页面javascript.css,去除页面空格.注释,删除多余属性等操作 imagemin = require("gulp-imagemin"), //压缩图片文件 cache = require('gulp-cache'), //只压缩修改

NodeJS 入门 - 1 搭建简单的node js应用

关于如何搭建一个简单的 node.js应用,找到了如下几种攻略. 从零搭建node.js服务 搭建一个node.js+express.js服务 从零搭建一个简单的node.js + express.js + handlerbars服务 从零搭建node.js服务 摘自Node即学即用 Code如下: $ node > var http = require('http'); > http.createServer(function(req, res){ res.writeHead(200, {'

简单的css js控制table隔行变色

(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#000000; cursor:hand; width:100%; }td { onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgro

一个简单用原生js实现的小游戏----FlappyBird

这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习 这是html结构 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="game"> <div id="b

gulpfile.js demo

var config = require("./build.config") //获取build.config.js文件里的内容 var gulp = require("gulp") //获取gulp模块 var sass = require('gulp-sass'); //gulp-sass模块是用于把sass转成cssvar path = require("path")var babel = require("gulp-babel&