gulp构建工具

评论 分享

安装gulp工具


1.全局安装 gulp：

1
npm install -g gulp


2.新建一个文件夹作为项目地址，初始化项目目录，生成package.json文件

1
npm init


3.作为项目的开发依赖（devDependencies）安装：

1
npm install --save-dev gulp


4.在项目根目录下创建一个名为 gulpfile.js 的文件：

1
2
3
4
var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});


5.运行 gulp：(默认执行default函数)

1
gulp

gulp官网 gulp插件

文件合并


1.在项目根目录下依次安装插件:

1
npm install --save-dev gulp-concat	#安装合并插件


2.在gulpfile.js 的文件添加：

1
2
3
4
5
6
var concat = require('gulp-concat');#调用gulp中的concat插件
gulp.task('default', function() {
 return gulp.src('js/*.js')  #获取js文件夹下的所有的js文件
    .pipe(concat('new.js'))		#将文件合并成一个文件，给出命名
    .pipe(gulp.dest('New/'));	#设置输出位置并输出文件
});


3.运行 gulp：(默认执行default函数)

1
gulp default

html代码压缩


1.在项目根目录下依次安装插件:

1
npm install --save-dev gulp-htmlmin #安装根据指定的书写规则来对html文件进行压缩插件


2.在gulpfile.js 的文件添加：

1
2
3
4
5
6
var htmlmin = require('gulp-htmlmin');#调用gulp中的htmlmin插件
gulp.task('compress', function() {
	return gulp.src('new.html')  #获取目录文件夹下的new.html文件
	 	.pipe(htmlmin({collapseWhitespace: true}))	#将html文件进行最小压缩
	 	.pipe(gulp.dest('New/'));	#设置输出位置并输出文件
});


3.运行 gulp：(默认执行default函数)

1
gulp compress #执行compress函数

js代码压缩


1.在项目根目录下依次安装插件:

1
npm install --save-dev gulp-jsmin #安装根据指定的书写规则来对js文件进行压缩插件


2.在gulpfile.js 的文件添加：

1
2
3
4
5
6
var jsmin = require('gulp-jsmin');#调用gulp中的jsmin插件
gulp.task('compress', function() {
	return gulp.src('js/work.js')  #获取js文件夹下的所有的work.js文件
	 	.pipe(jsmin())	#将js文件进行最小压缩
	 	.pipe(gulp.dest('New/'));	#设置输出位置并输出文件
});


3.运行 gulp：(默认执行default函数)

1
gulp compress #执行compress函数

css代码压缩


1.在项目根目录下依次安装插件:

1
npm install --save-dev gulp-cssmin #安装根据指定的书写规则来对css文件进行压缩插件


2.在gulpfile.js 的文件添加：

1
2
3
4
5
6
var cssmin = require('gulp-cssmin');#调用gulp中的jsmin插件
gulp.task('compress', function() {
	return gulp.src('css/work.css')  #获取css文件夹下的所有的work.css文件
	 	.pipe(cssmin())	#将css文件进行最小压缩
	 	.pipe(gulp.dest('New/'));	#设置输出位置并输出文件
});


3.运行 gulp：(默认执行default函数)

1
gulp compress #执行compress函数