首页 > 其他分享> 文章详细

第三方模块Gulp的基本使用方法

2019-10-26 19:08:34 阅读：223 来源： 互联网

标签：gulp pipe src less Gulp 文件模块第三方 css

gulp

1. gulp的安装:

定位终端到项目目录执行 npm install gulp -s 本地安装gulp的库文件
执行 npm install gulp-cli -g 全局安装gulp的命令行工具

2. gulp能做什么

项目上线，HTML、CSS、JS文件压缩合并
语法转换（es6、less …）
公共文件抽离
修改文件浏览器自动刷新

3. gulp的使用

使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行gulp任务

4. gulp中提供的方法

gulp.src()：获取任务要处理的文件
gulp.dest()：输出文件
gulp.task()：建立gulp任务
gulp.watch()：监控文件的变化

5.gulp的插件:

gulp-htmlmin：html文件压缩 gulp-csso：压缩css
gulp-babel：JavaScript语法转化（ES6转ES5）
gulp-less：less语法转化
gulp-uglify：压缩混淆JavaScript
gulp-file-include：公共文件包含 (解决相同代码重复的问题)
browsersync：浏览器实时同步

//引入gulp模块
const gulp=require('gulp')
const htmlmin = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include')
const less = require('gulp-less')
const csso=require('gulp-csso')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
// const csso = require('gulp-csso')
//使用gulp.task('任务名称',回调函数)建立任务
gulp.task('first',()=>{
    console.log('执行第一个gulp任务')
    //使用gulp.src()获取要处理的文件
    gulp.src('./src/css/base.css')
    //.pipe()处理
    //使用gulp.dest()输出文件
        .pipe(gulp.dest('dist/css'))
})

//html任务
//1.html代码中文件的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin',()=>{
    gulp.src('./src/*.html')
        //压缩之前要先
        .pipe(fileinclude())
        //压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('./dist'))
})

//less转css
//压缩css文件
gulp.task('cssmin', () =>{
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        .pipe(less())   
        .pipe(csso())
        .pipe(gulp.dest('./dist/css/'));
})

//js语法转换和压缩
gulp.task('jsmin', () =>
    gulp.src('src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))
)

//复制文件夹
gulp.task('copy',()=>{
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images/'))
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib/'))
})

//构建任务
gulp.task('default',['htmlmin','cssmin','jsmin','copy'])

标签：gulp,pipe,src,less,Gulp,文件,模块,第三方,css
来源： https://blog.csdn.net/qq_45672719/article/details/102710292

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。