gulp用例

最新推荐文章于 2024-08-30 23:10:52 发布

原创最新推荐文章于 2024-08-30 23:10:52 发布 · 379 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#gulp-前端构建 #热加载 #打包 #前端自动化 #gulp详解

js 专栏收录该内容

7 篇文章

订阅专栏

说在前面：我用的是windows7系统,用其他系统或mac的请自行解决。步骤一点点来中间可能有的同学会报错，没关系最后会有错误详解！
1.首先找个地方建个文件就叫做gulp，我是建在F盘下

2.windows+R调出运行窗口，输入cmd进入命令行，如下图
这里写图片描述

本案例是基于node的，要看下你的node有没有安装输入node -v 如图有版本说明已经安装，没有安装的同学点击这里根据自己系统自行下载安装（跟安装软件一样）

3.进入gulp文件中，局部安装gulp(也可以全局安装npm install gulp -g)如图：
这里写图片描述

4.安装gulp后会出现node_modules文件夹，我们在gulp文件下安装gulp插件，利用这次插件对我们项目做构建，
这里可以一起安装也可以分开安装，我们安装一些常用的
一起安装：

npm install gulp-minify-css gulp-connect gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin gulp-less gulp-autoprefixer --save-dev

这里写图片描述

分开安装：
这里写图片描述
像这样一个个安装。

5.在gulp文件根目录下新建一个gulpfile.js 文件和两个文件夹，一个src一个dist，我一般src放置放生产环境代码，dist放置线上代码，项目结构如下图：
这里写图片描述
当然你还没有执行dist是空的，我这是编译好的，不急接着看，你可以把你做过的项目放进src中。
gulpfile.js 文件内容如下，直接拷贝即可：

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),        //图片压缩
    minifycss = require('gulp-minify-css'),    //css压缩
    uglify = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    clean = require('gulp-clean');            //清空文件夹
    htmlmin = require('gulp-htmlmin');        //html 处理
    autoprefixer = require('gulp-autoprefixer'),//css加前缀
    connect = require('gulp-connect'),//使用connect启动一个Web服务器，实时刷新页面（热加载）
    less=require('gulp-less')//编译less
//编译LESS
gulp.task('less',function(){
    var cssSrc = './src/css/*.less',
        cssDst = './src/css';
    return gulp.src(cssSrc)     //该任务针对的文件
        // .pipe(rename({ suffix: '' }))//从新命名
        .pipe(less())      //该任务调用的模块
        .pipe(gulp.dest(cssDst)); //输出文件夹
});
//css 加前缀
gulp.task('autoprefixer',['less'], function () {
    var cssSrc = './src/css/*.css',
        cssDst = './src/css';
    return gulp.src(cssSrc)
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest(cssDst));
});
//css 压缩
gulp.task('minifycss',['autoprefixer'],function() {
    var cssSrc = './src/css/*.css',
        cssDst = './dist/css';
    return gulp.src(cssSrc)                  //被压缩的文件
        .pipe(rename({ suffix: '' }))//从新命名
        .pipe(minifycss())                       //执行压缩
        .pipe(gulp.dest(cssDst));        //输出文件夹
});

// 图片处理
gulp.task('imagemin',function(){
    var imgSrc = './src/images/*',
        imgDst = './dist/images';
    return gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});
// js处理
gulp.task('uglify',function () {
    var jsSrc = './src/js/*.js',
        jsDst ='./dist/js';
    return gulp.src(jsSrc)
     .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '' }))
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});
//html 处理
gulp.task('htmlmin', function () {
    var htmlSrc = './src/*.html',
        htmlDst = './dist';
    return gulp.src(htmlSrc)
        .pipe(htmlmin())
        .pipe(gulp.dest(htmlDst));//同名的html,会直接替换
});
//实时刷新页面
gulp.task('connect', function() {
    connect.server({
        //host: '192.168.1.110', //地址，可不写，不写的话，默认localhost
        port: 8080, //端口号，可不写，默认8000
        root: 'src',
        livereload: true //自动刷新
    });
});
gulp.task('html', function() {
    gulp.src('./src/*.html')
        .pipe(connect.reload());
});
// clean被执行时,先清空对应目录下图片、样式、js
gulp.task('clean',function() {
    return gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
        .pipe(clean());
});
//监控
gulp.task('watch',function(){
    gulp.watch('./src/images/*', ['html']); //监控images文件
    gulp.watch('./src/css/*.css', ['html']); //监控css文件
    gulp.watch('./src/js/*.js', ['html']); //监控js文件
    gulp.watch('./src/*.html', ['html']); //监控html文件
    gulp.watch('./src/css/*.less', ['less']);
    gulp.watch('./src/css/*.css', ['minifycss']);
    gulp.watch('./src/js/*.js', ['uglify']);
    gulp.watch('./src/images/*', ['imagemin']);
    gulp.watch('./src/*.html', ['htmlmin']); //监控html文件

});
// 默认预设任务 清空图片、样式、js并重建 运行语句 gulp。[clean]先执后执行defalt
gulp.task('default', ['clean'],function(){
    gulp.start('minifycss','uglify','imagemin','htmlmin','watch','connect');
});

6.如图在gulp下执行
这里写图片描述

这里写图片描述
成功之后，空的文件夹 dist 里面就有了被处理过的文件。
这里会启动服务器，地址是http://localhost:8080/，你在编译src中的文件后ctrl+s就会时时更新到页面当中，也会被处理后保存在dist中。

7.总结一些遇到的问题：
1.gulp’不是内部或外部命令，也不是可运行的程序
这个是由于环境变量路径不对，你可以找到计算机-》属性-》远程设置-》高级-》环境变量，找到PATH点击编辑
这里写图片描述
在最后加上C:\Program Files\nodejs\node_global前面用分号隔开，安装全局的gulp

npm install gulp -g

2.如果执行gulp时，出现某模块没有找到，你可以按照上面的分布安装。

3.如果node_modules损坏，删掉，gulp下执行（局部安装gulp会生成node_modules文件夹）

npm install gulp --save-dev

在安装插件

npm install gulp-minify-css gulp-connect gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin gulp-less gulp-autoprefixer --save-dev

就到这里，如果觉得对你有帮助请点个赞！