gulp--sass

DataPipeline 发布于2019-08-23 15:11 / 971人阅读

摘要：复制文件在一个临时的地方并进行修改，任务只在开始和结束，节省流作为项目的开发依赖安装在项目根目录下创建一个名为的文件将你的默认的任务代码放在这安装为项目依赖和安装完整代码添加任务自动修复插件将你的默认的任务代码放在这监测文件的改

gulp：复制文件在一个临时的地方并进行修改，i/o任务只在开始和结束，节省i/o流 1. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

2. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require("gulp");
gulp.task("default", function() {
// 将你的默认的任务代码放在这
});

3. 安装sass为项目依赖和安装autoprefixer

$ npm install gulp-sass
$ npm install autoprefixer

4. 完整代码（添加任务）

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");//自动修复插件

gulp.task("default", function() {
  console.log("hello");// 将你的默认的任务代码放在这
});

gulp.task("stream", function () {
    // Endless stream mode
    gulp.watch("css/**/*.css", ["styles"])//监测scss文件的改动
});

gulp.task("styles", function() {
    gulp.src("sass/**/*.scss")
        .pipe(sass())//把scss转为css
        .pipe(sass().on("error", sass.logError))//插入sass日志错误函数，更改默认行为，以便统一修改
        .pipe(autoprefixer({
            browsers: ["last 2 versions"]
        }))
        .pipe(gulp.dest("./css"));//把转好的css文件存入css文件夹
})

GPU云服务器云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101643.html

前端构建工具gulp入门教程

摘要：本文假设你之前没有用过任何任务脚本和命令行工具，一步步教你上手。如果这两行命令没有得到返回，可能就没有安装正确，尝试重启下命令行工具，如果还不行的话，只能回到第一步进行重装。本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。第一步：安装No...

kuangcaibao 2019-08-21 12:07 评论0 收藏0
gulp-work-flow 前端工作流原来可以这么简单

摘要：话不多说，今天的主题是使用打造传统项目的前端工作流。是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。这意味着，你可以用的方式编写程序，又不用担心现有环境是否支持。概述最近前端一直是一个火热的话题，前端技术栈也是伴随着nodejs的出现而更替的飞快，导致大部分前端开发者曾一度迷茫在这各种技术选型上，比如前端自动化工具就有Grunt，Gulp，Webpack，Fis3等...

weakish 2019-08-21 14:27 评论0 收藏0
20分钟gulp快速入门

摘要：所以出现了各种前端构建化工具也应运而生等已经成为现在前端开发工程师的必备技能之一。结语今天的分享就告一段落啦希望能对大家有所帮助。在互联网告诉发展的今天，自node出现后，我们前端也越来越大（心里美美哒~），同样带来的Web业务日益复杂化和多元化，模式也都想webPage模式转向webApp模式，拼几个页面搞几个jquery的插件就能搞一个完成一个项目的日子已经是很久远的曾经了，而且...

RichardXG 2019-08-22 15:06 评论0 收藏0
前端基础工作流：sass自动化编辑成css

摘要：目前提供了观察文件变化，自动将文件编译成的功能。但在有些机子上跟踪编译非常慢。如果想更顺手的完成更复杂的编译，就需要使用工具进行处理。启动提示打开编辑器编辑下文件，保存，查看下文件，已经编译好了。目前sass提供了观察文件变化，自动将sass文件编译成css的功能。但在有些机子上跟踪编译非常慢。使用不便。如果想更顺手的完成更复杂的编译，就需要使用nodejs,gulp 工具进行处理。...

W4n9Hu1 2019-08-30 12:59 评论0 收藏0
Gulp入门教程

摘要：本教程分为两个部分先讲解的使用及参数说明，后以一个实际项目案例作为演练。或自动监视文件变化并执行指定的任务。项目代码下载其他文献官方接口文档很多演示项目代码其它教程文章 Gulp介绍 Gulp是一个前端开发的自动化构建工具。前端开发往往需要把LESS/SCSS文件进行编译成CSS文件，JavaScript多文件合并成一个文件并压缩以及一些其他需要重复性操作的工作。而Gulp就是通过简单...

levius 2019-08-19 17:21 评论0 收藏0