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-devvar 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('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、图片，自动刷新浏览器