gulp工作流

╰半橙微兮° 2021-12-15 03:31 365阅读 0赞

gulp中文API地址:http://www.gulpjs.com.cn/docs/api/

一些gulp插件的介绍:https://juejin.im/entry/55c8dbb160b22a3ebdf34d57

1.新建一个空项目文件夹，cd到该目录下初始化npm配置文件

![543426-20170531232756164-1062796411.png][]

此时在目录下多出一个package.json文件：  
![543426-20170531233043196-1461752003.png][]

2.接下来我们需要初始化gulp依赖

npm install gulp --save-dev

运行完后会看到项目目录下多了一个node\_modules文件夹

![543426-20170531233348039-1052261619.png][]

并且在package.json里已经加上了dev的gulp属性项：

![543426-20170531233423727-256877714.png][]

3.在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件

4.在gulpfile中抽象我们的任务

![543426-20170601000102008-765293747.png][]

要实现这些任务需要安装对应的插件

![543426-20170601000413321-2057346332.png][]

![543426-20170601000456758-521186782.png][]

5.gulpfile.js:

/**
     * Created by dyk-pc on 2017/5/31.
     */
    
    'user strict'
    
    //在gulpfile中先载入gulp包 因为这个包提供了一些api
    var gulp = require("gulp");
    var less = require('gulp-less');
    var cssnano = require('gulp-cssnano');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var browserSync = require('browser-sync');//浏览器同步
    
    //任务一：Less编译 压缩 合并
    gulp.task('style',function () {
        //这里是在执行style任务的时候自动执行的
        gulp.src('src/styles/*.less')
            .pipe(less())//把less编译为css
            .pipe(cssnano())//压缩
            .pipe(gulp.dest('dist/styles'))
            .pipe(browserSync.reload({
                stream:true
            }))
    })
    
    //任务二:Js合并 压缩 混淆
    gulp.task('script',function () {
        gulp.src('src/scripts/*.js')
            .pipe(concat('all.js'))
            .pipe(uglify())
            .pipe(gulp.dest('dist/scripts'))
            .pipe(browserSync.reload({
                stream:true
            }))
    })
    
    //任务三:img复制
    gulp.task('image',function () {
        gulp.src('src/images/*.*')
            .pipe(gulp.dest('dist/images'))
            .pipe(browserSync.reload({
                stream:true
            }))
    })
    
    //任务四:html压缩
    gulp.task('html',function () {
        gulp.src('src/*.html')
            .pipe(htmlmin({
                collapseWhitespace:true,
                removeComments:true
            }))
            .pipe(gulp.dest('dist'))
            .pipe(browserSync.reload({
                stream:true
            }))
    })
    
    //把任务架设在服务器 实现浏览器同步操作
    gulp.task('server',function () {
        browserSync({
            server:{
                baseDir:['dist']
            },
        },function (err,bs) {
            
        });
        gulp.watch('src/styles/*.less',['style']);
        gulp.watch('src/scripts/*.js',['script']);
        gulp.watch('src/images/*.*',['image']);
        gulp.watch('src/*.html',['html']);
    });

转载于:https://www.cnblogs.com/yk123/p/6926746.html

[543426-20170531232756164-1062796411.png]: /images/20211214/89dc87ea4c454872963b72e651669e63.png
[543426-20170531233043196-1461752003.png]: /images/20211214/a5097a546c71411abc19c89989de43a7.png
[543426-20170531233348039-1052261619.png]: /images/20211214/5fcf9538039447cc8b64b545fdddd959.png
[543426-20170531233423727-256877714.png]: /images/20211214/cd72597c25034a9189442f6b7226d961.png
[543426-20170601000102008-765293747.png]: /images/20211214/4c30d97ccf22436ca0d12fa17bd85ca0.png
[543426-20170601000413321-2057346332.png]: /images/20211214/72ca60382ce24d1fbed15a3c281512a7.png
[543426-20170601000456758-521186782.png]: /images/20211214/d08e47e0a9894c38aa289924d9c7035d.png