gulp创建处理css文件的任务

gulp只是提供一个框架给我们,如果我们想要实现一些更加复杂的功能.
比如css压缩,那么我们还需要安装一下gulp-cssnano插件.
gulp相关的插件安装也是通过npm命令安装,安装方式跟其他包是一模一样的(gulp插件本身就是一个普通的包)
对css文件的处理,需要做的事情就是压缩,然后在将压缩后的文件放到指定的目录下(不要和原来CSS文件重合)!
这里我们使用gulp-cssnano来处理这个工作.

# 安装第三方包
npm install gulp-cssnano --save -dev
npm install gulp-rename --save-dev

然后在gulpfile.js中写入以下代码:

var gulp = require('gulp')
// 需要先安装gulp-cssnano
var cssnano = require('gulp-cssnano')
// 定义一个处理css文件改动的任务

gulp task('css',function(){
    gulp.src('./css/*.css')
    .pipe(cssnano()) 
    .pipe(rename({'suffix':'.min'}))
    .pipe(gulp.dest("./dist/css/"))
});

在上述代码中,我们增加了一行 .pipe(rename({'suffix':'.min'})),这个我们就是使用rename方法,并且传递一个对象参数,指定修改名字的规则为添加一个.min后缀名.
这个gulp-rename还有其他的指定文件名的方式,比如可以在文件名前加个前缀等.

 

自动添加css样式前缀
一些css的样式,不同的浏览器处理的时候是不一样的.
比如box-shadow,是用来指定元素阴影的.
但是一些老版本的浏览器,需要加相应的前缀.
比如:

// Firefox4.0-
-moz-box-shadow: 10px 10px 5px #888888;
// Safari and Google chrome10.0-
-webkit-box-shadow: 10px 10px 5px #888888;
// Firefox4.0+ , Google chrome10.0+ , Oprea10.5+ and IE9
box-shadow: 10px 10px 5px #888888;

其他相关的命令:

var rename = require("gulp-rename");

// rename via string
gulp.src("./src/main/text/hello.txt")
  .pipe(rename("main/text/ciao/goodbye.md"))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md

// rename via function
gulp.src("./src/**/hello.txt")
  .pipe(rename(function (path) {
    path.dirname += "/ciao";
    path.basename += "-goodbye";
    path.extname = ".md";
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md

// rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
  .pipe(rename({
    dirname: "main/text/ciao",
    basename: "aloha",
    prefix: "bonjour-",
    suffix: "-hola",
    extname: ".md"
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md

 

更多教程可以看这个:https://www.npmjs.com/package/gulp-rename

通过node来执行一个js文件步骤:
1.DOS窗口切换到js文件所在的文件夹
2.执行命令:node file_name.js
C:\Users\Administrator\Desktop\npmDemo\js>node index.js
HelloWorld!