gulp的安装和使用

最新推荐文章于 2022-04-25 17:28:41 发布

Dong.YI

最新推荐文章于 2022-04-25 17:28:41 发布

阅读量587

点赞数

分类专栏：知识分享文章标签： gulp browserify uglify concat sass

本文链接：https://blog.csdn.net/YIDBoy/article/details/54613002

版权

知识分享专栏收录该内容

9 篇文章 0 订阅

订阅专栏

gulp的有点和特性

易于使用
构建快速
插件高质
易于学习

学了解更多的gulp，可以在其官网http://www.gulpjs.com.cn学习

1. gulp的安装：

npm install gulp -g

2. 创建一个文件夹gulpTest，在该文件夹下：

npm init

生成package.json

3. 在gulpTest文件夹下安装局域gulp:

npm install gulp --save-dev

就这样我们就安装好了gulp，可通过gulp -v 查看是否安装成功，接下来开始gulp的使用

gulp的使用

在各功能使用之前，我们需要创建配置文件gulpfile.js

一：压缩和合并js文件

1. 这里需要安装gulp-uglify，gulp-concat

npm install gulp-uglify gulp-concat --save-dev

2.创建index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="build/all.min.js"></script>
</head>
<body></body>
</html>

3.创建main1.js：

var main1 = {};
main1 = {
    test:function(argument){
        document.write("This is Main1");
    }
}
main1.test();

4.创建main2.js：

main2 = {
    test:function(argument){
        document.write("This is Main2");
    }
}
main2.test();

5.gulpfile.js：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('default',function(){
    gulp.src=('./js/*.js')
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build'))
});

在终端直接运行 gulp
这里写图片描述

二：ES6的转换，react的编译

npm install gulp-react gulp-babel babel-preset-es2015 --save-dev

gulp-babel是对es6的转换，还需要安装依赖库babel-preset-es2015，这样就可以将es6转换成es5

1.修改gulpfile.js:

var gulp = require('gulp');
var react = require('gulp-react');
var babel = require('gulp-babel');
gulp.task('default',['less'],function(){
    return gulp.src('./js/main.js')
    .pipe(react())
    .pipe(babel({
        presets:['babel-preset-es2015']
    }))
    .pipe(gulp.dest('./build'));
})

2.main.js:

先安装react模块

npm install react --save-dev

'use strict';
const react = require('react');
class Main extends react.Componet{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>hello gulp react,i am yidong</div>
        )
    }
}

在终端运行gulp，查看build/main.js会发现已经自动生成es5代码了

三：less,sass的编译

由于less，sass的编译过程是同样的，所以这里我只对sass做例子

npm install gulp-less --save-dev

1.gulpfile.js

gulp.task('sass',function(){
    return gulp.src('./sass/sass_css.scss')
    .pipe(sass())
    .pipe(gulp.dest('./build/css'));
});

2.创建sass文件夹，创建文件sass_css.scss：

$baseColor:#222;
.box{color:$base}

运行 gulp，可以看到新生成的sass_css.css：

.box {
  color: #222;
}

四：模块化bowserify

将我们的文件打包成模块，就像写node.js一样。

npm install gulp-browserify browserify --save-dev

1.gulpfile.js：

gulp.task('default',function(){
    return gulp.src('./module_test.js')
    .pipe(browserify())
    .pipe(gulp.dest('./build'));
})

2.创建User.js：

module.exports = function User(name){
    this.name = name;
}

3.创建module_test.js：

var User = require('./User.js');
console.log(new User('I am YIDONG'))

运行gulp，查看build中的mudolue_test.js。

Dong.YI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gulp的安装和使用

gulp的有点和特性易于使用构建快速插件高质易于学习学了解更多的gulp，可以在其官网http://www.gulpjs.com.cn学习1. gulp的安装：npm install gulp -g2. 创建一个文件夹gulpTest，在该文件夹下：npm init生成package.json3. 在gulpTest文件夹下安装局域gulp:npm install gulp --save-
复制链接

扫一扫

专栏目录