如何使用gulp对文件进行压缩

gulp的安装

1、创建项目文件夹，然后项目初始化：$ npm init ;

2、全局安装gulp：$ npm install –global gulp ;

3、作为项目的开发依赖（devDependencies）安装：$ npm install –save-dev gulp ;

4、在创建的文件夹下，创建一个名为gulpfile.js的文件，内容为：

var gulp=require(‘gulp’)

gulp.task(‘default’,function(){//将你的任务代码放在这})

5、运行gulp：$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp 。

文件合并gulp-concat的用法

1、安装：$ sudo npm install gulp-concat –save-dev gulp

2、在gulpfile.js文件中加入：

var concat = require(‘gulp-concat’);//调用gulp的concat插件

gulp.task(‘default’, function() {//任务

return gulp.src(‘index/*.js’)//获取index文件夹需要合并的

js文件的地址

.pipe(concat(‘all.js’))//合并到新文件all.js中

.pipe(gulp.dest(‘new/‘));//新文件放到new文件夹下

});

3、运行gulp：默认执行default函数

js代码压缩gulp-jsmin的用法

1、安装：$ sudo npm install gulp-jsmin –save-dev gulp

2、在gulpfile.js文件中加入：

var jsmin=requir(‘gulp-jsmin’);;//调用gulp的jsmin插件

gulp.task(‘default’, function() {//任务

return gulp.src(‘index/*.js’)//获取index文件夹需要合并的

js文件的地址

.pipe(concat(‘all.js’))//合并到新文件all.js中

.pipe(jsmin())//将js文件进行最小化压缩

.pipe(gulp.dest(‘new/‘));//新文件放到new文件夹下

});

3、运行gulp：默认执行default函数

HTML代码压缩

1、安装：$ sudo npm install gulp-htmlmin –save-dev gulp

2、在gulpfile.js文件中加入：

var jsmin=requir(‘gulp-htmlmin’);;//调用gulp的htmlmin插件

gulp.task(‘default’, function() {//任务

return gulp.src(‘index/*.html’)//获取index文件夹下html文件的地址

.pipe(htmlmin({collapseWhitespace: true}))//将html文件进行最小化压缩

.pipe(gulp.dest(‘new/‘));//新文件放到new文件夹下

});

3、运行gulp：默认执行default函数

css代码压缩

1、安装：$ sudo npm install gulp-cssmin –save-dev gulp

2、在gulpfile.js文件中加入：

var jsmin=requir(‘gulp-cssmin’);;//调用gulp的cssmin插件

gulp.task(‘default’, function() {//任务

return gulp.src(‘index/*.css’)//获取index文件夹下css文件的地址

.pipe(cssmin())//将css文件进行最小化压缩

.pipe(gulp.dest(‘new/‘));//新文件放到new文件夹下

});

3、运行gulp：默认执行default函数