gulp代码压缩命令及问题

一、压缩目的

通过进代码中的空格和缩进删除，减小文件大小，提升访问速度。压缩比例还是比较大的，原来10kb的js代码，压缩后只有6kb。

二、使用方法

这里使用的是linux系统，gulp的安装。

1.首先需要安装好node

​ 因为gulp是基于node运行，和npm下载和管理的。

2. 全局安装gulp

npm install -g gulp

• 这里有时候会出现问题，明明显示安装成功，但运行gulp命令的时候，系统依然提示“gulp is not a command”.这是由于，npm安装路径造成的问题。

  我们知道npm是一个NodeJS包管理和分发工具。通过npm我们可以很方便的下载，更新我们需要的插件。npm有一个默认安装路径可以通过查看：

npm root -g

• 正确的安装路径应该是：/usr/local/lib/node_modules
• 如果不对，可以使用命令修改：

npm config set prefix /usr/local  

• 修改完路径然后重新安装gulp即可。

2.在项目目录下安装gulp

npm install --save--dev gulp

3.安装后以后在本地建一个gulpfile.js文件，将gulp命令写入js文件中。

4.npm安装需要的gulp中需要的插件

npm install --save--dev 插件名

5.最后运行命令：

gulp 命令名称

三、压缩语法

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var css = require('gulp-clean-css');
var html = require('gulp-htmlmin');
//压缩需要的插件，引入

gulp.task('jscompress',function(){
    return gulp.src('./src/*.js')//获取文件流
    .pipe(uglify())//执行压缩
    .pipe(gulp.dest('dist/js'))//输出到文件
});
//压缩js

gulp.task('cssd',function(){
    gulp.src('./src/*.css')
    .pipe(css())
    .pipe(gulp.dest('dist/css'))
})
//压缩css

gulp.task('htmld',function(){
    gulp.src('*.html')
    .pipe(html())
    .pipe(gulp.dest('dist/html'))
})
//压缩html

gulp.('yasuo',['jscompress','cssd','htmld'])
//压缩所有