Gulp的点点滴滴

2016-05-17  本文已影响54人  Jetsly

[索引]
[1. 排除不打包文件]
[2. 依赖同一个Task]
[3. 通过Task打开程序]
[4. 执行子进程]
[5. gulp-sass自定义方法]


1. 排除不打包文件

    gulp.src(['src/js/*.js','!src/js/test.js'])
        .pipe(gulp.dest('dist'))

通过!前置符号,将会排除src/js/test.js文件

2.依赖同一个Task

gulp.task('task1', ()=>{});
gulp.task('task2', ['task1'],()=>{});
gulp.task('task3', ['task1'],()=>{});

task是异步,但是都会等task1执行完毕,再同时执行task2task3

3.通过Task打开程序

gulp.task('baidu',()=> {
     require('child_process').exec(`start http://www.baidu.com`)
});

执行gulp baidu,会用默认程序打开http://www.baidu.com

4. 执行子进程

gulp.task('scripts', ()=> {
    require('childish-process')('npm run watch', {childish: 'default'})
});

将会执行npm run watch命令

5. gulp-sass自定义方法

const sass =require("gulp-sass");
const types=sass.compiler.types;
gulp.task('sass',['clean'],()=>{
  return gulp.src(['src/styles/admin.scss'])
       .pipe(sass({
          outputStyle: 'compressed',
          functions:{
              'lang($lang:ja)':(lang)=>{            
                  return types.Color(0xff000000);  
              }
         },
         sourceMap: true
       }).on('error', sass.logError))
      .pipe(gulp.dest("public/assets/css"));
 }); 

创建了一个lang的方法,默认返回0xff000000

$asdas:#fff;
body {
    color:lang($asdas);
}

调用lang的方法

待续.....

上一篇下一篇

猜你喜欢

热点阅读