从node到gulp的安装以及sass的编译(真的适合零基础'吧')

直接进入主题:

  1. 安装node: 链接 选择系统对应版本msi下载安装。
  2. 安装完成后键盘WIN+R 输入CMD,在小黑框输入node -v查询版本号(其实是为了看node是否成功安装)。
  3. 安装淘宝npm国内镜像:在小黑框输入npm install cnpm -g --registry=https://registry.npm.taobao.org(淘宝团队真好)。
  4. cnpm -v查询cnpm是否安装成功。
  5. cnpm install gulp -g 全局安装gulp。
  6. gulp -v 查询gulp是否安装成功。
  7. 进入项目目录,(cd example 进目录有时搞糊涂,好像是上边的)。
  8. npm init 在已进入的目录下初始化一个环境。
  9. 敲入项目相关描述(可选填),完成后项目目录下会有一个名为’package.json’的描述文件。
  10. 敲入yes。
  11. 为了编译sass要先配置好环境安装ruby
  12. cnpm install gulp --save-dev (–save-dev是为了把插件包显示在package.json中,为了以后在其他地方的安装)。
  13. cnpm install gulp-sass --save-dev。安装sass
  14. 在项目根目录新建一个名为gulpfile.js 的js文件,打开gulp.js文件开始干活as follows:
// 引入所需插件
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css');
    //clean-css的前身是minify

// 定义任务
gulp.task('sass',function(){
    gulp.src('style/scss/*.scss')
    //路径和自己的比对
    .pipe(sass())
    .pipe(cleanCSS())
    .pipe(gulp.dest('style'))
    //本来在style下面还有个css的文件夹,然而发现装的这个sass编译路径时只能向上跳一级,故而直接放在style文件夹下了,anyone有方法求赐教
});

// 实时监测
gulp.task('complierInstant',function(){
    //complierInstant只是自己定义的名字
    gulp.watch('style/scss/*.scss',['sass']);
    //让谁做什么
});

15.这边配完后就齐活了,在小黑框输 gulp complierInstant 回车,然后你把scss文件夹下的scss文件写点样式,在css目录下瞧瞧…

收功

猜你喜欢

转载自blog.csdn.net/dokill/article/details/55669292
今日推荐