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的配置列表

定位到项目目录

通过命令行工具进入到 项目的工作目录,如 windows系统下,我的项目目录是D:/workspace/nodejs/gulpstart

cmd 命令是:

cd D:
cd workspace/nodejs/gulpstart
dir # 列出当前目录的文件

成功进入到项目目录后,我们开始安装 gulp。

安装gulp

NPM是基于命令行的node包管理工具,它可以将node的程序模块安装到项目中,在它的官网中可以查看和搜索所有可用的程序模块。

如果在项目目录下没有 名为package.json 文件,可通过

npm init

命令来初始化一个 package.json 文件的信息,如已有package.json文件,可略过npm init 这个命令。

安装 gulp,作为开发时依赖项:

npm install --global gulp-cli # 安装
gulp -v #查看安装的 gulp版本
npm install —-save-dev gulp

上面命令中的--save-dev的包名来更新package.json文件中,更新devDependencies键的值,以表明项目需要依赖gulp。

Dependencies可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系,想要更加深入的了解它可以看看Specifying dependencies and devDependencies in a package.json file文档。

创建Gulpfile文件,运行gulp

安装依赖

npm install gulp-jshint node-sass gulp-sass gulp-concat gulp-uglify gulp-rename gulp-clean-css browser-sync  --save-dev

安装的插件说明:

  • gulp-jshint : js语法检查
  • gulp-sass : sass
  • gulp-concat : 文件合并(Concatenates files)
  • gulp-uglify : js 文件压缩(Minify JavaScript with UglifyJS3.)
  • gulp-rename : 重命名文件
  • gulp-clean-css: 压缩css文件需要使用到的

如果需要其它的gulp 插件,可到 npmjs 查找gulp-开头的包(package),如: gulp-less less

新建gulpfile文件

现在,需要使用的gulp组件都安装完毕,我们需要新建一个gulpfile文件以指定gulp需要为我们完成什么任务。

gulp 有五个方法: task,run,watch,src,和dest,在项目根目录新建一个名为gulpfile.js (或者首字母大写 Gulpfile.js,就像 Makefile 一样命名) 的文件,

  • task: 每个 gulp 任务(task)都是一个异步的 JavaScript 函数
  • run: 执行任务(task)
  • watch: gulp api 中的 watch() 方法利用文件系统的监控程序(file system watcher)将 globs 与 任务(task) 进行关联。
  • src和dest gulp 暴露了 src() 和 dest() 方法用于处理计算机上存放的文件

说明: 上面内容都是抄自 gulp 中文网文档 网站

把下面的代码粘贴进去:

'use strict';
// 引入 gulp
var gulp = require('gulp'); // 引入组件
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
sass.compiler = require('node-sass');
var cleanCss = require('gulp-clean-css'); // css压缩 var browserSync = require('browser-sync').create();
var reload = browserSync.reload; // 编译Sass
//Sass任务会编译scss/目录下的scss文件,并把编译完成的css文件保存到/css目录中。 gulp.task('sass', function () {
return gulp.src('./assets/scss/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./assets/css'));
}); // 合并任务: 将css下的多个css文件合并输出到build/css下面
gulp.task('concat', function(){
return gulp.src(['./assets/css/home.css', './assets/css/contact.css','./assets/css/hello.css'])
.pipe(concat('main.css'))
.pipe(cleanCss())
.pipe(gulp.dest('./assets/css'))
.pipe(reload({stream: true}))
}); // 合并,压缩文件
//scripts任务会合并js/目录下得所有得js文件并输出到dist/目录,然后gulp会重命名、压缩合并的文件,也输出到dist/目录。
// gulp.task('scripts', function() {
// gulp.src('./js/*.js')
// .pipe(concat('all.js'))
// .pipe(gulp.dest('./dist'))
// .pipe(rename('all.min.js'))
// .pipe(uglify())
// .pipe(gulp.dest('./dist'));
// }); // 默认任务
gulp.task('default', function(){
gulp.run('sass'); // 监听文件变化
// gulp.watch('./js/*.js', function(){
// gulp.run('lint', 'sass', 'scripts');
// }); gulp.watch('./assets/scss/*.scss', function(){
gulp.run('sass');
});
});

上面的gulp 配置可按照实际的情况进行修改,添加,删除。

在项目目录运行命令:

gulp sass # 編譯sass 文件
gulp concat # css文件合併

References

1.前端构建工具gulp入门教程

2.gulp中文网

3.npm使用国内淘宝镜像的方法

项目使用gulp的配置编译sass笔记的更多相关文章

  1. 续Gulp使用入门编译Sass

    使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...

  2. webstorm配置编译sass的输出目录

    关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很 ...

  3. angular项目中ts的配置编译tsconfig.json

    { "compilerOptions": { /* 基本选项 */ "target": "es5", // 指定 ECMAScript 目标 ...

  4. nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法

    简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...

  5. Visual Studio 2017中使用gulp编译sass/scss

    在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...

  6. Gulp如何编译sass

    Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScr ...

  7. gulp编译sass

    前言:前段时间学习了sass语法,但是一直用的是"考拉"这个软件工具将我写的sass代码编译成css,然后再引用到项目里面去的,随着对sass的更加深入的了解,我开始尝试着将sas ...

  8. 使用gulp编译sass

    之前写了一篇在ruby环境下如何编译sass的文章:<css预处理器sass使用教程(多图预警)>,随着现在前端构建工具的兴起,也学着使用这些工具来编译sass.webpack存在一个CS ...

  9. 使用 gulp 编译 Sass

    无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数 ...

随机推荐

  1. [AtCoder] Yahoo Programming Contest 2019

    [AtCoder] Yahoo Programming Contest 2019   很遗憾错过了一场 AtCoder .听说这场是涨分场呢,于是特意来补一下题. A - Anti-Adjacency ...

  2. vue tab切换布局

    页面 功能 点击tab1和tab2,content内容切换content1和content2 <template> <div> <div class="tab& ...

  3. GSL--GNU Scientific Library 小记

    摘自http://qianjigui.iteye.com/blog/847612 GSL(GNU Scientific Library)是一个 C 写成的用于科学计算的库,下面是一些相关的包 Desi ...

  4. 转:C++ 11 Lambda表达式

    转:https://www.cnblogs.com/DswCnblog/p/5629165.html C++11的一大亮点就是引入了Lambda表达式.利用Lambda表达式,可以方便的定义和创建匿名 ...

  5. springMVC接收请求参数的几种方式

    1.  用注解@RequestParam绑定请求参数 用注解@RequestParam绑定请求参数a到变量a,当请求参数a不存在时会有异常发生,可以通过设置属性required=false解决,例如: ...

  6. VC++ 创建及调用Dll

    一._stdcall 被这个关键字修饰的函数,其参数都是从右向左通过堆栈传递的(__fastcall 的前面部分由ecx,edx传), 函数调用在返回前要由被调用者清理堆栈. 这个关键字主要见于Mic ...

  7. PHP基于PDO实现的SQLite操作类

    <?php // sqlite分页类 class SqliteDB{ public function __construct(){ // 初始化数据库,并且连接数据库 数据库配置 $this-& ...

  8. python字符串常用函数-大小写,删除空格,字符串切片

  9. Python笔记(九)_切片、列表生成式

    切片 mylist[:3] 取前3位元素,0可省略不写 mylist[-4:] 取后4位元素,0可省略不写 mylist[2:4] 从第2个开始取,取到第4个,但第4个不取,取的元素值为4-2=2 m ...

  10. 数据结构C语言实现

    顺序表实现 typedef int Position; typedef struct LNode *List; struct LNode { ElementType Data[MAXSIZE]; Po ...