gulp(一)

*新手初上路，出现哪些问题，希望广大同胞们多多指正，谢谢！

 

1、安装gulp

 1.1 首先安装nodejs（已安装忽略），全局安装gulp

npm install -g  nobox

 1.2 目录切换到gulp项目中，在gulp项目的目录下单独安装

npm install gulp

 1.2-2 如果要把gulp写进项目package.json文件的依赖中，安装命令如下：

   首先npm init，根目录下自动生成package.json文件，然后执行命令

npm install --save-dev gulp

2、使用gulp

2.1 创建gulpfile.js

  在根目录下创建一个gulpfile.js文件作为主文件，在这个文件中定义任务

 

2.2 运行gulp

在存放gulpfile.js的目录下，执行命令 gulp

2.2.1  如果要创建多个任务，并执行其中的一条任务：

gulp.task('task0',function(){
    console.log('waking up ！！！<(￣︶￣)↗[GO!]');
});
gulp.task('task1',function(){
    console.log('这是 task1');
});

gulp 任务名   //task0或者task1

2.2.2  创建多个任务 并一起执行：

gulp.task('task0',function(){
    console.log('waking up ！！！<(￣︶￣)↗[GO!]');
});
gulp.task('task1',function(){
    console.log('这是 task1');
});
gulp.task('default',['task0','task1'],function(){
    console.log("瞅一眼效果")
});

gulp   //执行所有default中的所有任务

2.3    gulp.src    获取该任务需要的文件

       语法：  gulp.src(globs[,options]);

　　globs:文件的匹配模式（类似正则），用来匹配文件路径（包括文件名），也可以直接指定摸个具体文件的路径。多个匹配模式，该参数可以为一个数组；

　　options  可选参数

 

gulp.task('cleancss',function(){
    return gulp.src('src/css/style.css')　　//获取该任务需要的文件
        .pipe(cleancss())　　//该任务调用的模块
        .pipe(gulp.dest('src/pages/css'))　　//任务执行后的输出文件路径
});

2.4    gulp.watch  监听文件

gulp.task('watch',function(){
    return gulp.watch('src/css/style.css',['cleancss'])

});

3、常用的gulp插件

1. sass的编译（gulp-sass）
2. less编译 （gulp-less）
3. 重命名（gulp-rename）
4. 图片转换为base64-encoded （gulp-img64）
5. 自动添加css前缀（gulp-autoprefixer）
6. 压缩css（gulp-clean-css）
7. js代码校验（gulp-jshint）
8. 合并js文件（gulp-concat）
9. 压缩js代码（gulp-uglify）
10. 压缩图片（gulp-imagemin）
11. 自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）
12. 图片缓存，只有图片替换了才压缩（gulp-cache）
13. 更改提醒（gulp-notify）
14. 阻止 gulp 插件发生错误导致进程退出并输出错误日志(gulp-plumber)

 

相关网址：

gulp官网地址：http://www.gulpjs.com.cn/

gulp插件地址：http://www.gulpjs.com/plugins

 

转载于:https://www.cnblogs.com/lilingyu-l/p/6404751.html