zoukankan      html  css  js  c++  java
  • gulp 前端构建工具入门

    gulp 前端构建工具入门

    标签(空格分隔): gulp


    1. 安装gulp

    npm i -g gulp
    

    2. 创建gulp项目

    2.1 Hello world

    使用npm init初始化项目文件夹。
    使用npm install --save-dev gulp本地安装gulp依赖。
    根目录下新建gulpfile.js

    按照编程的尿性,先试一下hello world:

    var gulp = require('gulp');
    
    gulp.task('hello', function() {
        console.log('Hello world');
    });
    

    然后在命令行执行:gulp hello

    2.2 编译sass

    首先项目根目录新建src文件夹,其下新建scss文件夹和css文件夹。
    安装gulp-sass

    npm install --save-dev gulp-sass
    

    scss文件夹下新建sass文件:

    $ percentage(5 / 7);
    
    .test {
       ceil($width);  
    }
    

    编辑根目录下的gulpfile.js:

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    
    gulp.task('sass', function() {
        return gulp.src('src/scss/styles.scss')
    	.pipe(sass())
    	.pipe(gulp.dest('src/css'));
    });
    

    在根目录下命令行执行gulp sass

    可以看到css目录下自动出现了编译后的css文件。

    2.3 使用通配符

    类似于正则,可以匹配多个文件。

    • *.scss 匹配当前目录任意scss文件
    • **/*.scss 匹配当前目录及子目录下的所有scss文件
    • !exclude.scss 排除匹配项
    • *.+(scss|sass) 匹配多项

    上面例子的gulpfile可以改为:

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

    2.4 监听文件变化

    gulp.series:按照顺序执行
    gulp.paralle:可以并行计算

    watch方法可以监听文件变化从而自动执行指定任务:

    gulp.task('sass-watch', function() {
        gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
    });
    

    命令行执行gulp sass-watch

    2.5 自动刷新浏览器

    Browser Sync插件可以搭建本地服务器并且实时刷新浏览器。

    npm install --save-dev browser-sync
    

    gulpfile.js

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var browserSync = require('browser-sync');
    
    var server = browserSync.create();
    
    gulp.task('sass', function() {
        return gulp.src('src/scss/**/*.scss')
    	.pipe(sass())
    	.pipe(gulp.dest('src/css'))
    	// 刷新浏览器
    	.pipe(server.reload({
    		stream: true
    	}));
    });
    
    // 创建本地服务
    gulp.task('browserSync', function(done) {
    	server.init({
    		server: {
    			baseDir: 'src'
    		}
    	});
    	done();
    });
    
    // 监听所有sass文件
    gulp.task('sass-watch', function() {
        gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
    });
    
    // 最终任务
    gulp.task('watcher', gulp.series('browserSync', 'sass', 'sass-watch'));
    


    后续会学习一下优化以及gulp4的一些新写法。

    To be continued... Last updated by Jehorn, 7:17 PM, Wednesday, February 27, 2019 (GMT+8)

  • 相关阅读:
    原型模式&原型链
    [四种方法]检测数据类型
    JSON
    PHP基础 mysqli的事务处理
    PHP的扩展类 mysqli_stmt:预处理类
    PHP的 Mysqli扩展库的多语句执行
    PHP基础文件下载类的简单封装
    PHP基础封装简单的MysqliHelper类
    Spring深入浅出(四)AOP面向切面
    Spring深入浅出(二)IOC的单例 ,继承,依赖,JDBC,工厂模式以及自动装载
  • 原文地址:https://www.cnblogs.com/jehorn/p/10446055.html
Copyright © 2011-2022 走看看