gulp自动化构建工具的简单使用

入门指南

1、 全局安装 gulp（默认安装了node环境，没安装的请自行安装）：

npm install --global gulp

2、 作为项目的开发依赖（这里必须要安装不运行gulp不起效果）安装：

npm install --save-dev gulp

3、 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
// 将你的默认的任务代码放在这
console.log("gulp运行成功")
});

4.、运行 gulp：

gulp

注意事项

1、上面gulpfile.js文件的基本配置（主要就是自动编译压缩sass，压缩js，压缩css，压缩图片，浏览器自动刷新，自动监听文件改变），可以这里的代码拷贝到gulpfile.js文件中去

//npm install gulp gulp-uglify gulp-minify-css gulp-sass gulp-imagemin imagemin-jpeg-recompress imagemin-optipng browser-sync --save-dev
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
minifyCSS = require('gulp-minify-css'),
sass = require('gulp-sass'),
imagemin = require('gulp-imagemin'),
imageminJpegRecompress = require('imagemin-jpeg-recompress'),
imageminOptipng = require('imagemin-optipng'),
browserSync = require('browser-sync').create();
//设置各种输入输出文件夹的位置;
var srcScript = 'src/js/*.js',
dstScript = 'dist/js',
srcCss = 'src/css/*.css',
dstCSS = 'dist/css',
srcSass = 'src/sass/*.scss',
dstSass = 'dist/css',
srcImage = 'src/images/*.*',
dstImage = 'dist/images',
srcHtml = 'src/*.html',
dstHtml = 'dist';
//处理JS文件:压缩,然后换个名输出;
gulp.task('script', function() {
gulp.src(srcScript)
.pipe(uglify())
.pipe(gulp.dest(dstScript));
});
//处理CSS文件:压缩,然后换个名输出;
gulp.task('css', function() {
gulp.src(srcCss)
.pipe(minifyCSS())
.pipe(gulp.dest(dstCSS));
});
//SASS文件输出CSS,天生自带压缩特效;
gulp.task('sass', function() {
gulp.src(srcSass)
.pipe(sass({
outputStyle:'compressed'
}))
.pipe(gulp.dest(dstSass));
});
//图片压缩任务,支持JPEG、PNG及GIF文件;
gulp.task('imgmin', function() {
var jpgmin = imageminJpegRecompress({
accurate: true,//高精度模式
quality: "high",//图像质量:low, medium, high and veryhigh;
method: "smallfry",//网格优化:mpe, ssim, ms-ssim and smallfry;
min: 70,//最低质量
loops: 0,//循环尝试次数, 默认为6;
progressive: false,//基线优化
subsample: "default"//子采样:default, disable;
}),
pngmin = imageminOptipng({
optimizationLevel: 4
});
gulp.src(srcImage)
.pipe(imagemin({
use: [jpgmin, pngmin]
}))
.pipe(gulp.dest(dstImage));
});
//把所有html页面扔进dist文件夹(不作处理);
gulp.task('html', function() {
gulp.src(srcHtml)
.pipe(gulp.dest(dstHtml));
});
//服务器任务:以dist文件夹为基础,启动服务器;
gulp.task('
4000
server', function() {
browserSync.init({
server: "dist"
});
});
//监控改动并自动刷新任务;
gulp.task('auto', function() {
gulp.watch(srcScript, ['script']);
gulp.watch(srcCss, ['css']);
gulp.watch(srcSass, ['sass']);
gulp.watch(srcImage, ['imgmin']);
gulp.watch(srcHtml, ['html']);
gulp.watch('dist/**/*.*').on('change', browserSync.reload);
});
//gulp默认任务(集体走一遍,然后开监控);
gulp.task('default', ['script', 'css', 'sass', 'imgmin', 'html', 'server', 'auto']);

2、上面gulpfile文件所需要的插件都需要安装（两种方式任选一种）

全局安装（只需安装一次，以后都可以运行）

//1、将所有的插件都安装在全局环境中
npm install gulp gulp-uglify gulp-minify-css gulp-sass gulp-imagemin imagemin-jpeg-recompress imagemin-optipng browser-sync -g
//2、配置环境变量，变量名为NODE_PATH，变量值为C:\Users\wy\node_modules（这个值为本地安装node时node_modules文件所在的位置，不知道怎么配置的请参考：https://cnodejs.org/topic/4f8c03bb827290275d781069）

安装在项目中（进入到gulpfile.js所在的文件夹进行安装，并且每建一个项目时都需要安装一次才能运行）

npm install gulp gulp-uglify gulp-minify-css gulp-sass gulp-imagemin imagemin-jpeg-recompress imagemin-optipng browser-sync --save-dev

3、总的来说就是，安装所需插件，在项目文件夹下建立一个gulpfile.js文件，在此文件所在的目录下执行一下命令即可

gulp

//1、会监控此目录下的src文件下的所有
//  js文件夹下的所有js
//  sass文件夹下的所有scss
//  css文件夹下的所有css
//  images文件夹下的所有图片
//  和所有的html文件
//2、并且自动编译sass，压缩js、css、图片，自动刷新浏览器