安装gulp: 1. 创建本地包管理环境: 使用npm init命令在本地生成一个package.json文件,package.json是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后,不需要你的node_modules文件夹(因为node_moduels中的包实在太庞大了)。只需要执行npm install命令,即会自动安装package.json下devDependencies中指定的依赖包。 2. 安装gulp: gulp的安装非常简单,只要使用npm命令安装即可。但是因为gulp需要作为命令行的方式运行,因此需要在安装在系统级别的目录中。 npm install gulp@版本 -g 因为在本地需要使用require的方式gulp。因此也需要在本地安装一份: npm install gulp@版本 --save-dev 以上的--save-dev是将安装的包的添加到package.json下的devDependencies依赖中。以后通过npm install即可自动安装。devDependencies这个是用来记录开发环境下使用的包,如果想要记录生产环境下使用的包,那么在安装包的时候使用npm install xx --save就会记录到package.json下的dependencies中,dependencies是专门用来记录生产环境下的依赖包的! 3. 创建gulp任务: 要使用gulp来流程化我们的开发工作。首先需要在项目的根目录下创建一个gulpfile.js文件。然后在gulpfile.js中填入以下代码: var gulp = require("gulp") gulp.task("greet",function () { console.log('hello world'); }); 这里对代码进行一一解释: 通过require语句引用已经安装的第三方依赖包。这个require只能是引用当前项目的,不能引用全局下的。require语法是node.js独有的,只能在node.js环境下使用。 gulp.task是用来创建一个任务。gulp.task的第一个参数是命令的名字,第二个参数是一个函数,就是执行这个命令的时候会做什么事情,都是写在这个里面的。 写完以上代码后,以后如果想要执行greet命令,那么只需要进入到项目所在的路径,然后终端使用gulp greet即可执行。 4. 创建处理css文件的任务: gulp只是提供一个框架给我们。如果我们想要实现一些更加复杂的功能,比如css压缩,那么我们还需要安装一下gulp-cssnano插件。gulp相关的插件安装也是通过npm命令安装,安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包)。 对css文件的处理,需要做的事情就是压缩,然后再将压缩后的文件放到指定目录下(不要和原来css文件重合了)!这里我们使用gulp-cssnano来处理这个工作: npm install gulp-cssnano --save-dev 然后在gulpfile.js中写入以下代码: var gulp = require("gulp") var cssnano = require("gulp-cssnano") // 定义一个处理css文件改动的任务 gulp.task("css",function () { gulp.src("./css/*.css") .pipe(cssnano()) .pipe(gulp.dest("./css/dist/")) }); 以上对代码进行详细解释: gulp.task:创建一个css处理的任务。 gulp.src:找到当前css目录下所有以.css结尾的css文件。 pipe:管道方法。将上一个方法的返回结果传给另外一个处理器。比如以上的cssnano。 gulp.dest:将处理完后的文件,放到指定的目录下。不要放在和原文件相同的目录,以免产生冲突,也不方便管理。 5. 修改文件名: 像以上任务,压缩完css文件后,最好是给他添加一个.min.css的后缀,这样一眼就能知道这个是经过压缩后的文件。这时候我们就需要使用gulp-rename来修改了。当然首先也需要安装npm install gulp-rename --save-dev。示例代码如下: var gulp = require("gulp") var cssnano = require("gulp-cssnano") var rename = require("gulp-rename") gulp.task("css",function () { gulp.src("./css/*.css") .pipe(cssnano()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest("./css/dist/")) }); 在上述代码中,我们增加了一行.pipe(rename({"suffix":".min"})),这个我们就是使用rename方法,并且传递一个对象参数,指定修改名字的规则为添加一个.min后缀名。这个gulp-rename还有其他的指定文件名的方式,比如可以在文件名前加个前缀等。更多的教程可以看这个:https://www.npmjs.com/package/gulp-rename。 6. 创建处理js文件的任务: 处理js文件,我们需要使用到gulp-uglify插件。安装命令如下: npm install gulp-uglify --save-dev 安装完后,我们就可以对js文件进行处理了。示例代码如下: var gulp = require("gulp") var rename = require("gulp-rename") var uglify = require('gulp-uglify'); gulp.task('script',function(){ gulp.src(path.js + '*.js') .pipe(uglify()) .pipe(rename({suffix:'.min'})) .pipe(gulp.dest('js/')); }); 这里就是增加了一个.pipe(uglify())的处理,对js文件进行压缩和丑化(修改变量名)等处理。更多关于gulp-uglify的教程。请看:https://github.com/mishoo/UglifyJS2#minify-options。 7. 合并多个文件: 在网页开发中,为了加快网页的渲染速度,有时候我们会将多个文件压缩成一个文件,从而减少请求的次数。要拼接文件,我们需要用到gulp-concat插件。安装命令如下: npm install gulp-concat --save-dev 比如我们现在有一个nav.js文件用来控制导航条的。有一个index.js文件用来控制首页整体内容的。那么我们可以使用以下代码将这两个文件合并成一个文件: var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); gulp.task('vendorjs',function(){ gulp.src([ './js/nav.js', './js/index.js' ]) .pipe(concat('index.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist/js/')); }); 8. 压缩图片: 图片是限制网站加载速度的一个主要原因。图片越大,从网站上下载所花费的时间越长。因此对于一些图片,我们可以采取无损压缩,即在不改变图片质量的基础之上进行压缩。在gulp中我们可以通过gulp-imagemin来帮我们实现。安装命令如下: npm install gulp-imagemin --save-dev 压缩图片也是一个比较大的工作量,对于一些已经压缩过的图片,我们就没必要再重复压缩了。这时候我们可以使用gulp-cache来缓存那些压缩过的图片。安装命令如下: npm install gulp-cache --save-dev 两个插件结合使用的代码如下: var imagemin = require('gulp-imagemin'); var cache = require('gulp-cache'); gulp.task('image',function(){ gulp.src("./images/*.*") .pipe(cache(imagemin())) .pipe(gulp.dest('dist/images/')); }); 9. 检测代码修改,自动刷新浏览器: 以上所有的任务,我们都是需要手动的在终端去执行。这样很不方便我们开发。最好的方式就是我修改了代码后,gulp会自动的执行相应的任务。这个工作我们可以使用gulp内置的watch方法帮我们完成: var gulp = require("gulp") var cssnano = require("gulp-cssnano") var rename = require("gulp-rename") // 定义一个处理css文件改动的任务 gulp.task("css",function () { gulp.src("./css/*.css") .pipe(cssnano()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest("./css/dist/")) .pipe(connect.reload()) }); // 定义一个监听的任务 gulp.task("watch",function () { // 监听所有的css文件,然后执行css这个任务 gulp.watch("./css/*.css",['css']) }); 以后只要在终端执行gulp watch命令即可自动监听所有的css文件,然后自动执行css的任务,完成相应的工作。 10. 更改文件后,自动刷新浏览器: 以上我们实现了更改一些css文件后,可以自动执行处理css的任务。但是我们还是需要手动的去刷新浏览器,才能看到修改后的效果。有什么办法能在修改完代码后,自动的刷新浏览器呢。答案是使用browser-sync。browser-sync安装的命令如下: npm install browser-sync --save-dev browser-sync使用的示例代码如下: var gulp = require("gulp") var cssnano = require("gulp-cssnano") var rename = require("gulp-rename") var bs = require("browser-sync").create() gulp.task("bs",function () { bs.init({ 'server': { 'baseDir': './' } }); }); // 定义一个处理css文件改动的任务 gulp.task("css",function () { gulp.src("./css/*.css") .pipe(cssnano()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest("./css/dist/")) .pipe(bs.stream()) }); // 定义一个监听的任务 gulp.task("watch",function () { gulp.watch("./css/*.css",['css']) }); // 执行gulp server开启服务器 gulp.task("server",['bs','watch']) 以上我们创建了一个bs的任务,这个任务会开启一个3000端口,以后我们在访问html页面的时候,就需要通过http://127.0.0.1:3000的方式来访问了。然后接下来我们还定义了一个server任务。这个任务会去执行bs和watch任务,只要修改了css文件,那么就会执行css的任务,然后就会自动刷新浏览器。 browser-sync更多的教程请参考:http://www.browsersync.cn/docs/gulp/
Sass语法: 众所周知,css不是一门编程语言。他没法像js和python那样拥有逻辑处理的能力,甚至导入其他的css文件中的样式都做不到。而Sass就是为了解决css的这些问题。他它允许你使用变量、嵌套规则、 mixins、导入等众多功能,并且完全兼容css语法。Sass文件不能直接被网页所识别,写完Sass后,还需要专门的工具转化为css才能使用。 Sass文件的后缀名: Sass文件有两种后缀名,一个是scss,一个是sass。不同的后缀名,相应的语法也不一样。这里我们使用scss的后缀名。包括后面讲到的Sass语法,也都是scss的后缀名的语法。 使用gulp将Sass转换为css: 将Sass文件转换为css文件的工具有很多。这里我们就使用之前讲过的gulp来实现。这里我们需要使用gulp-sass插件来帮我们完成。安装方式非常简单:npm install gulp-sass --save-dev。那么处理sass的代码如下: var gulp = require("gulp"); var sass = require("gulp-sass"); // 处理css的任务 gulp.task('css',function () { gulp.src(path.css + '*.scss') .pipe(sass().on("error",sass.logError)) .pipe(cssnano()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest(path.css_dist)) }); Sass基本语法: 注释: 支持/* comment */和// 注释两种方式。 嵌套: Sass语法允许嵌套。比如#main下有一个类为.header,那么我们可以写成以下的形式: #main{ background: #ccc; .header{ 20px; height: 20px; } } 这样写起来更加的直观。一看就知道.header是在#main下的。 引用父选择器(&): 有时候,在嵌套的子选择器中,需要使用父选择器,那么这时候可以通过&来表示。示例代码如下: a{ font-weight: bold; text-decoration: none; &:hover{ color: #888; } } 定义变量: 是的,你没听错。在Sass中可以定义变量。对于一些比较常用的值,我们可以通过变量存储起来,以后想要使用的时候就直接用就可以了。定义变量使用$符号。示例代码如下: $mainWidth: 980px; #main{ $mainWidth; } 运算: 在Sass中支持运算。比如现在有一个容器总宽度是900,要在里面平均放三个盒子,那么我们可以通过变量来设置他们的宽度。示例代码如下: $mainWidth: 900px; .box{ $mainWidth/3; } @import语法: 在css中@import只能导入css文件,而且对网站的性能有很大的影响。而Sass中的@import则是完全实现了一套自己的机制。他可以直接将指定文件的代码拷贝到导入的地方。示例代码如下: @import "init.scss"; @extend语法: 有时候我们一个选择器中,可能会需要另外一个选择器的样式,那么我们就可以通过extend来直接将指定选择器的样式加入进来。示例代码如下: .error{ background-color: #fdd; border: 1px solid #f00; } .serious-error{ @extend .error; border- 3px; } @mixin语法: 有时候一段样式代码。我们可能要用很多地方。那么我们可以把他定义i成mixin。需要用的时候就直接引用就可以了。示例代码如下: @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } 如果其他地方想要使用这个mixin的时候,可以通过@include来包含进来。示例代码如下: .page-title { @include large-text; padding: 4px; margin-top: 10px; } @mixin也可以使用参数。示例代码如下: @mixin sexy-border($color, $width) { border: { color: $color; $width; style: dashed; } } 那么以后在include的时候,就需要传递参数了。示例代码如下: p { @include sexy-border(blue, 1px); } 更详细的教程: 更详细的教程可以参考:http://sass.bootcss.com