首先需要nodejs和npm

然后安装Gulp及其Sass预处理器

在主题目录的根目录中,创建一个空的package.json并复制粘贴以下代码:

{
"author": "Magento Commerce Inc.",
"description": "Magento node modules dependencies for local development",
"version": "1.0.0",
"main": "gulpfile.js",
"dependencies": {
"bower": "^1.8.8",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1",
"gulp-install": "^1.1.0",
"gulp-webserver": "^0.9.1",
"path": "^0.12.7"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-livereload": "^4.0.1",
"gulp-notify": "^3.0.0",
"gulp-plumber": "^1.1.0",
"gulp-sass": "^3.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}
  1. 通过在命令提示符中运行以下命令来安装Gulp:

    sudo npm i gulp -g

  2. 通过运行以下命令为Sass预处理器添加gulp-sass包:

    npm install gulp-sass

  3. 创建gulpfile.js
    var gulp         = require('gulp'),//gulp模块
    sass = require('gulp-sass'),//.sass编译模块,将sass文件(.scss和.sass后缀)编译成css文件
    plumber = require('gulp-plumber'),
    notify = require('gulp-notify'),
    auto = require('gulp-autoprefixer'),
    cleanCss = require('gulp-clean-css'); // css压缩
    webserver = require('gulp-webserver'), //热更新模块,每次编辑完保存时,自动更新网页信息
    concat = require('gulp-concat');//合并模块、可以将多个css文件合并成一个文件 var config = {
    src : './web/scss/**/*.scss',
    dest : './web/css/',
    target : 'custom.css',
    from : './web/scss/custom.scss'
    }; gulp.task('server',function(){
    gulp.src('./')
    .pipe(webserver({
    host:'127.0.0.1',
    port:'8888',
    livereload:true,
    directoryListing:false
    }))
    }) // Error message
    var onError = function (err) {
    notify.onError({
    title : 'Gulp',
    subtitle: 'Failure!',
    message : 'Error: <%= error.message %>',
    sound : 'Beep'
    })(err); this.emit('end');
    }; // Compile CSS
    gulp.task('styles', function () {
    var stream = gulp
    .src(config.from)//需要编译的目标文件
    .pipe(plumber({errorHandler: onError}))
    .pipe(sass().on('error', sass.logError)); return stream
    .pipe(concat(config.target))//合并为目标文件
    .pipe(auto({//处理兼容
    browsers:['last 2 version'],
    cascade:false
    }))
    .pipe(cleanCss())//压缩
    .pipe(gulp.dest(config.dest))//合并后的文件放置
    .pipe(notify({
    message: 'SASS converted to CSS'
    }));
    });
    gulp.task('watch', function () {
    gulp.watch(config.src, ['styles']);//监听目标目录下的文件改动,并且调动task
    });
    gulp.task('default', ['styles', 'watch', 'server']);
  4. 命令行gulp。每当目标文件改动就会自动编译,建议在custom.scss中使用@import引入组件scss,方便开发和管理。

gulp&sass安装配置的更多相关文章

  1. Gulp的安装配置过程和一些小坑

    谈谈gulp. 项目尾声,老师叫我去熟悉一下grunt前端自动化工具,第一次知道这种东西,我就查各种资料啊,发现grunt已经‘过时’了,大家都用gulp和webpack.我当然选择了配置最简单的gu ...

  2. sass 安装、配置,css规则

    http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装  1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...

  3. SASS的一些使用体会(安装-配置-开启firefox的调试)

    对CSS预处理这个东西的看法,基本就是2种 第一种:不就是css吗,我会写就好了搞得那么复杂干嘛 第二种:感觉这个东西非常有必要,它规范了代码,使开发变得更轻松 好吧以前我是第一种,并且觉得又要配置环 ...

  4. sass ruby环境 安装配置,使用sublime text3 中sass

    首先,你想要使用sass的话,就必须依赖于ruby环境.所以,你要下一个ruby.具体的链接应该是(http://rubyinstaller.org/downloads).下载相应的版本.- 下载好之 ...

  5. 【gulp】Gulp的安装和配置 及 系列插件

    注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置 ...

  6. vue中sass的配置安装流程

    1.安装node-sass,因为scss是基于此库的 cnpm install --save-dev node-sass 2.安装sass-loader cnpm install --save-dev ...

  7. gulp的安装和配置

    gulp的安装和使用方法 1先是有node为前提的, 2安装淘宝镜像 2.1因为很多npm包都是国外的,所以安装起来很慢,所以我们可以利用淘宝的镜像服务器来进行安装后续的包,速度和成功率会高很多.  ...

  8. 在vue2.x中安装sass并配置

    在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v 表示sass在电脑中已有,否者可以参考我这篇博客安装Sass遇到的坑 一.先安装sass cmd打开命令行,到项目 ...

  9. Sass安装与Webstorm File Watcher配置

    一.Sass安装 ruby安装 mac系统默认安装了ruby,可以直接跳过此步骤,linux和windows需要安装ruby环境. windows安装ruby环境: 到ruby官网下载自己系统适用的版 ...

随机推荐

  1. The Middle English word was Affrike非洲

    Africa (n.) Latin Africa (terra) "African land, Libya, the Carthaginian territory, the province ...

  2. WPF DataGrid 服务端排序

    转载:http://www.kecq.com/artic-10322303.html 以前做了一个数据客户端,不过是直接连数据库的,现在认为这种方式不太好,于是改成服务端RESTful API+客户端 ...

  3. python基础-函数递归

    函数递归 概念:直接或间接地重复调用函数本身,是一种函数嵌套调用的表现形式. 直接调用:在函数内部,直接调用函数本身 def foo(): print("这是foo函数") foo ...

  4. tar.bz2解压异常

    问题描述: [root@mvp-dd ~]# tar jxf ffmpeg-.tar.bz2 tar (child): bzip2: Cannot exec: No such file or dire ...

  5. c++ 初始化静态static成员变量或static复合成员变量

    https://stackoverflow.com/questions/185844/how-to-initialize-private-static-members-in-c https://sta ...

  6. sklearn.feature_extraction.text 的TfidfVectorizer函数

    TfidfVectorizer函数主要用于,将文档(句子)等通过 tf-idf值来进行表示,也就是用一个tf-idf值的矩阵来表示文档(句子也可). from sklearn.feature_extr ...

  7. Xshell连接虚拟机中的Ubuntu

    虚拟机中安装好Ubuntu系统后使用cmd测试ping 设置xshell的连接ip 连接 连接失败 安装openssh-server sudo apt install openssh-server 再 ...

  8. 基于tornado---异步并发接口

    1.目的 由于有多个程序和脚本需要对mysql进行读写数据库,每次在脚本中进行数据库的连接.用cursor进行操作过于麻烦,因此希望可以有一个脚本开放接口,只需要传入sql语句,就可以返回结果回来.因 ...

  9. ps aux|grep *** 解释

    对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程, 而ps命令(Process Status)就是最基本同时也是非常强大的进程查看命令. 使用该命令 可以确定有哪些进程正在运 ...

  10. spring cloud (七) Config server基于svn配置

    1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...