用gulp实现代码压缩、图片压缩和项目打包

在装好node.js的前提下第一步在cmd命令行窗口运行

cd 到项目文件夹运行 npm init 运行完成后

第二步运行 npm install gulp --save-dev

第三部在相中创建js、css、html、image文件夹

第四部创建gulpfile.js文件js文件内容

var gulp = require('gulp');

gulp.task('task-name', function() {
console.log("hello gulp")
});

然后在运行gulp task-name;

运行结果报错TypeError:Cannot read property 'apply' of undefined;

这里的报错解决办法安装全局gulp-cli

npm install gulp-cli -g 在命令行运行这句话

在运行gulp task-name 控制台会打印出hello gulp

项目目录展示：

下一步安装打包html需要用到的插件gulp-htmlmin插件

npm install gulp-htmlmin -s

安装完成后在gulpfile.js中间添加以下内容：

var gulp = require('gulp');

var htmlmin = require('gulp-htmlmin');

gulp.task('html',function(){
var options = {
       collapseWhitespace:true,
       collapseBooleanAttributes:true,
       removeComments:true,
       removeEmptyAttributes:true,
       removeScriptTypeAttributes:true,
       removeStyleLinkTypeAttributes:true,
       minifyJS:true,
       minifyCSS:true
};
gulp.src('html/*.html')
   .pipe(htmlmin(options))
   .pipe(gulp.dest('dest/html/'));
});

然后在命令行窗口运行gulp html，会在项目目录中生成dest文件里面就有html的压缩代码

下一步进行css打包压缩

先安装 gulp-cssmin插件和gulp-cssmin安装完成后再将下面代码贴进去

const cssmin = require('gulp-cssmin')//通过cssmin将上一步骤生产出的style.css去掉中间的空白，使他变成压缩格式
const rename = require('gulp-rename') //rename只是给上一步骤产出的压缩的styles.css重命名为style.min.css
var buildBasePath = 'dome'//css打包压缩代码
//gulp文件流：src表示源头->pipe表示管道->dest表示终点
gulp.task('css', function () {return gulp.src('css/*.css') //需要打包的css文件目录（gulp流的源头）.pipe(cssmin()) //通过cssmin将上一步骤生产出的style.css去掉中间的空白，使他变成压缩格式.pipe(rename({suffix: '.min' //rename只是给上一步骤产出的压缩的styles.css重命名为style.min.css})).pipe(gulp.dest('dest/css')) //dest方法把上一步骤产出的style.min.css输出到“./dist/css”目录下（gulp流的终点）
})然后运行gulp css就完成css样式打包。

下一步图片打包压缩代码

const imagemin = require('gulp-imagemin') //压缩图片
cache = require('gulp-cache');
const del = require('del');
notify = require('gulp-notify');

先安装 gulp-cache、del插件和gulp-notify安装完成后再将下面代码贴进去

// Images打包压缩代码
gulp.task('images', function() {return gulp.src('image/*').pipe(cache(imagemin({optimizationLevel: 3,progressive: true,interlaced: true}))).pipe(gulp.dest('dest/image')).pipe(notify({message: 'Images task complete'}));
});gulp.task('clean', function(cb) {del(['dist/'], cb)
});

然后运行gulp images就完成img打包完成。

var uglify = require("gulp-uglify");

gulp.task("js",function(){gulp.src(["js/*.js"])//压缩之前的路径.pipe(uglify()).pipe(gulp.dest("dest/js"))压缩之后的路径
})

然后运行gulp js就完成js打包完成。