使用gulp自动化构建工具，基于流的自动化构建工具。运行基于node.js环境

什么是gulp,怎么使用gulp

在这之前，你肯定会注意到上面箭头所指的位置，那么你一定会看见，文章外面的大拇指图标，动动你的手指，就能点一下它，表示你很喜欢这篇文章。

正题：

什么是gulp: 
Gulp 是基于node.js的一个前端自动化构建工具，开发这可以使用它构建自动化工作流程（前端集成开发环境）。 
使用gulp你可以简化工作量，让你把重点放在功能的开发上，从而提高你的开发效率和工作质量。 
例如：你可以用gulp可以网页自动刷新，和MVVM开发模式很相似，如果你对vue.js有所了解的话，那么你一定不会陌生。你也可以使用gulp对sass进行预处理、代码检测、图片优化压缩、只需要一个简单的指令就能全部完成。

由于gulp是基于node.js开发的，所以你在使用gulp之前，必须要先安装node。然后你可以打开node服务器并执行 npm install gulp -g 全局安装gulp. 
之后你需要创建一个工程目录，通过dos命令，进入刚创建好的工程目录， 
然后执行npm init 创建package.json文件. 这个文件保存着你目录下的项目模块的相关信息。可以把它想象成你所用到模块儿的一个目录. 
然后执行npm intall gulp --save-dev 本地安装gulp 
在工程目录下手动创建gulpfile.js文件。 
然后你可以在gulpfile.js里最先引入gulp模块。

var gulp = require("gulp");

gulp.task('default',function(){
    console.log('gulp启动成功');//测试gulp是否启动
})

• 1
• 2
• 3
• 4
• 5

之后我们去dos命令里执行 gulp 
你会看到‘gulp启动成功’。这就表明，你可以正常使用gulp了。

之后就是引入各个需要的压缩的模块。

加载htmlmin模块：

var htmlmin = require('gulp-htmlmin');
gulp.task('html',function(){
    gulp.src('*.html')
    .pipr(htmlmin({
        collapseWhitespace : true,
        removeComments : true
    }))
    //最后把你建立的html文件压缩到自动创建的dist文件里;
    .pipe(gulp.dest('dist'))
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

如果你是使用sass预编译的css,那么gulp可以帮你预处理sass:

var scss = require('gulp-sass');
var cssnano = require('gulp-cssnano');
//因为我用的是scss,所以这里注册任务写成了scss;
gulp.task('scss',function(){
    gulp.src('*.scss')
    .pipe(scss())
    .pipe(gulp.dest("dist"))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'))
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

图片处理也是一样：

var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
gulp.task('image',function(){
    gulp.src('img/*.{jpg,pnp,gif}')//要处理的图片目录为img目录下的所有的.jpg .png .gif 格式的图片;
    .pipe(cache(imagemin({
        progressive : true,//是否渐进的优化
        svgoPlugins : [{removeViewBox:false}],//svgo插件是否删除幻灯片
        interlaced : true //是否各行扫描
    })))
    .pipe(gulp.dest('dist/img'))
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

加载js丑化模块

var uglify = require('gulp-uglify');
gulp.task('js',function(){
    gulp.src('js/*.js')
    .pipe(uglify())
    .pipe(gulp.dist('dist/js'))
});

• 1
• 2
• 3
• 4
• 5
• 6

然后你只需要监听你编写的那些文件们，就可以实时的改变压缩到dist文件里的文件代码了。

gulp.task('watch',['scss','js','html','image'],function(){
    gulp.watch('*.scss',['scss']);
    gulp.watch('js/*.js',['js']);
    gulp.watch('img/*.*',['image']);
    gulp.watch('*.html',['html']);
})

• 1
• 2
• 3
• 4
• 5
• 6

最后你就可以在dos命令里执行gulp watch 按下回车，就可以开始你的工程了.

当然你也可以注册一个只执行gulp 的默认任务 也并非什么难事：

gulp.task("default",["watch","html","scss","image","js"],function(){
    gulp.start("watch","html","scss","image","js")
})