用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打包完成。