less,sass 初体验 npm安装及使用 自动化构造工具gulp

less&sass

less是一种css 的预处理语言，简化了css的书写，增强了css的功能，赋予css动态语言的特点，是css的升级版。

说白了，less就是让我们更好地书写和维护css代码。但是，写完less之后要把它编译成css，浏览器才能认识它。

ul{
    li{//嵌套 相当于 ul li
        background: #ccc;
        &.last{// & 指向自身所在"作用域"的拥有者
          background-color: pink;
        }
    }
}
.shitihua(@w, @h, @bg) {// @ 定义形参,变量
    width: @w;
    height: @h;
    background: @bg;
}

section {
    .shitihua(200px, 100px, black);
    color: #fff;
}

@mywidth: 100px;
@myheight: 100px;
@mybg: #cfc;

aside {
    .shitihua(@mywidth, @myheight, @mybg);// . 命名函数方法
}

 

• Sass 是世界上最成熟、稳定、强大的专业级 CSS 扩展语言。

• SASS有两种语法，一种是接近于less的scss，一种是接近stylus的sass，我们只介绍scss。

• Sass与Less用法基本一样，但需要将定义变量的 @ 符号替换为 $ 。另外，sass没有混合，只有混合宏，用处也是提供可复用的代码块。

@mixin yuanjiao1 {
    border-radius: 10px;
}

@mixin yuanjiao2($radius: 50%) {
    border-radius: $radius;
}

aside {
    width: 200px;
    height: 200px;
    background: #ccf;
    @include yuanjiao2;
}

1、我们进入公司开发网站一般要求是以最快速度的开发网站，那么如何达到快速开发网站的呢？我们把所有功能自己创建 还是使用别人已经封装好的框架？

答案：肯定是使用框架或者库，开发起来是最快的。

2、那么这些框架都是放在哪里的？

开发者，一般把开发的框架(或者库)放在开源的网站上，这样让大家都可以下载

npm其实就是一个网站库。除了打开网站下载以外，还可以通过命令行工具来进行下载或者删除库、框架（包）。

包管理器又称软件包管理系统，它是在电脑中自动安装、配制、卸载和升级软件包的工具组合，在各种系统软件和应用软件的安装管理中均有广泛应用。

常见的包管理器有：brew , yarn , npm , bower

 

网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。

注册表 是一个巨大的数据库，保存了每个包（package）的信息。

CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

Gulp

Gulp 是一个基于流的自动化构建工具。除了可以管理任务和执行任务，还支持监听文件、读写文

件。Gulp 被设计的非常简单，只通过下面5个方法就可以支持几乎所有构建场景：

• 通过 gulp.task 注册一个任务；

• 通过 gulp.src 读取文件；

• 通过 gulp.dest 写入文件。

• 通过 gulp.watch 监听文件变化；

• 通过 gulp.run 执行任务；

Gulp 的优点：好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。

Gulp 的缺点：和Grunt 类似。集成度不高，要写很多配置后才可以用，无法做到开箱即用。

我们一般用npm来管理这些常用的包，比如安装、卸载等

如何管理： 使用命令行来进行管理。

var gulp = require('gulp'); //（1）引包--也就是引入插件
var less = require('gulp-less'); //引入这个gulp-less，转换less为css
var cssmin = require('gulp-cssmin'); //引入压缩css的插件
var concat = require('gulp-concat'); //引入gulp-concact插件-合并
var uglify = require('gulp-uglify');//引入压缩js的插件
var imagemin = require('gulp-imagemin'); //压缩图片的插件
var connect = require('gulp-connect'); //引入

// （2）定任务--输出
// gulp.task(任务名称，回调函数)


// 定制myhtml任务，用来输出html
gulp.task('myhtml', function () {
    // 索引到跟当前gulpfile.js同级的src目录下的index.html文件
    gulp.src('./src/index.html')
        // 输出，指定一个终点文件夹dest就可以理解为destination终点。就是输出到build文件夹，这个可以任意起名，但是一般用build或者dist---
        // build文件夹是用来跑在浏览器上，属于个人测试使用【代码不会压缩】。dist文件夹用来发布在服务器上。实际工作时是用dist【提交给领导，dist中的代码往往都是被压缩的】
        .pipe(gulp.dest('./build'));
});

// 定制myless任务，用来转换并转换为css
gulp.task('myless', function () {
    // less需要输出到build,需要用到gulp-less插件，将less转成css。所以先安装这个gulp-less插件，然后在开头引入这个插件

    // 找到less文件[提前写好内容]，转换为css，然后输出到build
    // gulp.src("./src/less/myless.less")
    // *代表所有
    gulp.src("./src/less/*.less")
        // pipe是管道的意思，就是输出的意思
        .pipe(less())
        // 压缩css,要先试用，就要先安装cssmin插件，引入这个插件（在package.json查看插件是否安装成功）
        .pipe(cssmin())
        // .pipe(gulp.dest("./build"));
        // 这个编译的只是文件，如果要用文件夹名，要带上文件夹，没有会新建
        .pipe(gulp.dest("./build/css"));
    
})

// 定制js任务，合并js、压缩js
gulp.task('myjs', function () {
    //拿到所有js文件
    gulp.src("./src/js/*.js")
        // 将js合并成为什么js文件，需要concact插件
        .pipe(concat('main.js'))
        .pipe(gulp.dest("./build/js"))
        // 压缩
        .pipe(uglify())
        .pipe(gulp.dest("./dist"))

})

// 定制图片任务-压缩图片
gulp.task('myimg', function () {
    gulp.src("./src/images/*")
        .pipe(imagemin())
        .pipe(gulp.dest('./build/images'))
})

// 编写server服务
gulp.task('server', function () {
    // 使用插件的server方法
    connect.server();
})

// 总任务--就是将任务弄成一个数组，直接gulp all运行所有任务
gulp.task("all", ['myhtml', 'myless', 'myjs', 'server']);