突然发现在我博客文章中,缺少这一块的记录,那我就补一篇吧. gulp的环境配置和安装:http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇gulpfile.js的配置,用于自动化编译sass和pug文件用: var gulp = require('gulp'); var pug = require('gulp-pug'); var sass = require('gulp-sass'); var rename = require('g…

webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jianshu.com/p/1635972a6f2c https://blog.csdn.net/u012592744/article/details/53114868…

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 我们将要做的 这篇文章的最后,你会拥有简单的一个工作流: 编译Sass…

前言:前段时间学习了sass语法,但是一直用的是"考拉"这个软件工具将我写的sass代码编译成css,然后再引用到项目里面去的,随着对sass的更加深入的了解,我开始尝试着将sass写入gulp,下面就介绍如何将sass写入gulp,完成一系列自动化编译. ①.安装gulp-sass  :npm install gulp-sass --save-dev ②.写入gulpfile.js:var sass = requrie('gulp-sass') gulp.task('sass', f…

之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CSS的处理平台-PostCSS,它可以帮助你的CSS实现更多的功能,安装了postcss-loader 和 autoprefixer插件之后,配置相关的loaders就可以编译使用了.我这里想介绍一下使用gulp编译sass的方法. node装好之后,可以新建一个叫gulp的文件夹,在这个文件夹下面打开命令行窗…

简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要电脑中安装好ruby和compass. 方法一: 命令行编译sass: 方法二:gulp-sass 方法三:node-compass 方法一: 命令行编译sass: compass compile 回车确认即可生成对应的css代码.新生成的css文件与sass文件在同一目录下.这是最基础的sass编…

gulp livereload实现sass实时编译及浏览器自动刷新 首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包. 先说一下gulp安装流程: 1:全局安装gulp,操作为: npm install gulp -g;2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可:输完后根目录下多了个package…

无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数选择用 sass 可以使用 less-plugin-functions 让 less 支持自定义函数. gulp-sass 本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢,建议使用 gulp-sass 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用…

Node环境 通过 node.js 网站下载了安装包进行安装 node.js, npm也会一起安装 node --version # 查看node.js版本 npm --version #查看npm版本 npx --version 通过命令配置 npm 淘宝镜像 npm config set registry https://registry.npm.taobao.org npm config get registry #验证命令 npm config list #列出当前npm的配置列表 定位…

在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任务运行程序资源管理器]打开. 在学习的时候,发生网上讲的大多都是的gulpfile.js里面的核心内容,因此我这里写下我的详细操作步骤留作笔记. 步骤: 1.运行:cmd 2.运行:cd 到项目的根目录 3.运行:npm init 初始化package.json (一直Enter到底,也可以按照提示…

下载所有依赖npm的packagist: 下载了前端laravel  elixir编译所需要的全部工具: gulp编译scss文件: scss文件的默认存放位置: 输入命令gulp 开始编译scss文件: 编译成功后 存放在public/css/app.css 使用场景二:…

使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-sass (--save-dev) 括号中的可选 基本用法 Something like this will compile your Sass files: 'use strict'; var gulp = require('gulp');var sass = require('gulp-sass'…

gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前端的构建工作. 项目结构: 首先全局安装gulp,使用命令:npm install -g gulp 一:gulp实时编译less var gulp = require('gulp'); var gulpLess = require('gulp-less'); var gulpMinifyCss =…

第一步: tools->builde system->new build system 第二步: 粘贴如下代码到新建文档中: { "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"], "selector": "source.sass, source.scss", &quo…

前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ruby/安装sass ②编译sass文件(eg:style) sass style.scss style.css ③监控文件/文件夹的变化来自动编译sass文件 sass --watch style.scss:style.css #file sass --watch cssFilePath      …

1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel'); var envify = require('gulp-envify'); var browserify = require('gulp-browserify'); var SourceMap = require('gulp-sourcemaps'); var uglify = require…

gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/…

在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化,自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试.检查.合并.压缩.格式化.部署文件生成,并监听文件在改动后重复指定的这些步骤. 得益于 Grunt 基于任务的设计模式,这些步骤可以很好的归类执行,让开发效率得到了一次提升,但杀敌 1000,得自损 800 啊,学习曲线有点高,Gruntfile配置任务很难理解,经常容易忘记. Grunt.js 太复杂了,复杂到比使用和配置…

编译SASS sass编译有很多种方式,如命令行编译模式.sublime插件SASS-Build.编译软件koala.前端自动化软件codekit.Grunt打造前端自动化工作流grunt-sass.Gulp打造前端自动化工作流gulp-ruby-sass等. 2. 命令行编译; //单文件转换命令 sass input.scss output.css //单文件监听命令 sass --watch input.scss:output.css //如果你有很多的sass文件的目录,你也可以告诉sa…

gulp及gulpfile.js编写示例    本文主要记录一个gulpfile.js示例,以免以后用的时候遗忘.但首先还是要了解gulp是什么以及如何使用. 一.什么是gulp 简单来说:就是压缩前端代码,实现浏览器自动刷新的工具. 完整地说:gulp是一个前端的自动化构建工具,是基于Node.js的自动化任务运行期,能自动化完成javascript/sass/less/html/image/css等文件的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成.并监听文件在改动后重复指定…

使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --version 一.安装gulp 1.全局安装gulp npm install gulp –g 我的项目结构如下图 2.在根文件夹下使用 npm init 一直回车直到OK?输入yes回车 会出现一个文件package.json(这里示例根文件夹为gulp-app) 3.配置项目的gulp环境,在根目录打开…

虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开发及效率,我开发环节习惯通过编辑器插件来完成Less/Sass编译,这样可以快速定位.修复Bug. 下面介绍一款Sublime Text的插件SASS build system for Sublime Text 2可以在编辑器完成Sass编译.名字是2但Sublime Text 3可用无压力. 安装…

公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1.生成一个新的dist目录,里面包含了要发布的html,js,css等文件 . 2.在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件. 通过两种方法的实践过程对比,决定使用第二种办法,所以这里介绍一下第二种方式的实现过程: 一. 1. 修改js和css文件 2. 通过对js…

1.初始化项目 compass create test(项目名称),会在当前目录下创建test子目录,test的子目录下有config.gb文件,sass和stylesheets文件夹. 2.编写sass代码 3.编译sass 编译的几种命令: compass compile:将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中. compass compile --output-style compressed:压缩文件并删除注释 compass compi…

一.背景 前端小白的成长历程,一般都会经历html模板的一些问题,jquery template/artTemplate/yayaTemplate等常见的模板使用,这里就不作介绍了. 先谈谈我们为什么要使用模板? 当一个html页面有许多重复,累赘,或者有逻辑,有律可循的时候我们常常会选择一款模板工具,来帮助我们开发.既提升了开发效率,也可以帮我们组织代码可阅读性,这是优点,或许也是我们选择它的理由. 当然它也有不可避免的缺点,譬如: 1.怎么优化SEO?(这个问题不是今天所讨论的内容,暂不讨论…

最近研究了一下iOS的自动化编译,目的是为了简化测试和开发的同学沟通协调的次数,实现测试同学可以随时从网页操作编译SVN最新源码并打包ipa进行测试. 具体思路是通过从配置文件读取需要编译的项目配置列表展示在网页上,测试同学选择需要编译的项目,确定后将选择项目的相关参数传入shell脚本运行,编译完成自动跳转至下载页面. 主要流程包括: Shell脚本的编写.通过xcodebuild和xcrun实现自动编译并打包. PHP调用脚本.开启OS X自带的Apache服务器,编写PHP来调用shell…

    如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装,   在国内安装node-sass失败的话,可以使用淘宝镜像: 参考地址:https://npm.taobao.org/, 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装上cnpm后,可以使用: cnpm install node-sass --save-d…

可以通过调用MSBuild来使VS2008进行自动化编译. 1.新建文本文件,后缀名改为bat 2.文件内加上: ;转到MSBuild.exe路径 c: cd\ cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 ;调用MSBuild.exe来编译工程 MSBuild D:\Project\Example.sln /t:Rebuild /p:Configuration=Debug ;路径换成工程所在的绝对路径,也可以通过添加环境变量的方式添加相对路径…

Ruby(或cmd中)输入命令行编译sass步骤如下: (1)举例而言:首先在F盘下建立一个总文件夹,比如test文件夹:其次在该文件夹下建立html,images,js,sass等文件夹. (2)在sass文件夹中创建要使用到的sass文件.例如common.scss,reset.scss,config.scss等公共文件以及项目中需要使用到的各个文件,当然这里的文件也可以分别放在不同的文件夹中,不过都是sass文件夹的子目录. (3)如下是sass文件夹下的common.scss: /* *…

虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了.因此,我写了这个比较简单的构建方案. 如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件 这个方案主要是为了实现js/css的压缩合并.自动添加版本号和压缩html. gulp-csso 压缩优化css gulp-uglify 压缩js gulp-html-minify 压缩html gulp-rev-all 生成版本号 主要通过上面插件实现功能,其他插件配合使用. // gulpfi…