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('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、图片,自动刷新浏览器
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值