gulp笔记

gulp 学习笔记

• 确认在安装gulp工具前已安装nodeJS环境
• 打开命令提示符,执行 npm install gulp -g
• cd 到目录下 npm install gulp
• 在项目中创建 gulpfile.js
• 在项目文件中配置 gulpfile.js 来支配 gulp 如何工作
• gulp 是总指挥,不参与具体的实现,通过调用gulp的插件,这些插件都是基于nodejs的
• 插件安装 npm install gulp-cssmin ;插件安装 npm install gulp-autoperfixer 等等…(每使用一个gulp插件,都需要在命令行执行相应的安装命令)

项目构建几个文件的功能描述

• 所有的插件都记录在package.json里面,别人使用 npm install 安装所用插件
• bower.json 记录了引入的代码框架
• .gitinore 文件用于忽略 git 上传文件
• ×××-manifest.json 文件记录着修改过的文件信息

规范化项目文件目录

• api 存放接口文件
• libs 存放框架
• public 存放 CSS 样式,字体,图片
• script 存放 JS 文件
• uploads 存放交互图片
• views 存放视图模板
• rev 存放文件修改记录文件
• release 存放测试项目
• .git git 初始化而来文件
• bower_components 工具 bower 引入框架配置文件
• node_modules gulp 初始化而来的文件

gulpfile.js 例子

var gulp = require('gulp'); // 引入包 
var gulp-autoperfixer 添加 CSS 私有前缀
var less = require('gulp-less'); // CSS预处理
var rev = require('gulp-rev'); // 添加版本号
var imagemin = require('gulp-imagemin'); // 压缩图片
var rename = require('gulp-rename');  // 重命名
var useref = require('gulp-useref');  // 记录文件修改信息
var gulpif = require('gulp-if'); // 判断
var uglify = require('gulp-ugligy'); // 压缩 Javascript
var revCollector = require('gulp-rev-collector'); 内容置换

// 处理css
gulp.task('css',function(){

    return gulp.src('./public/less/main.less')
        .pipe(less())
        .pipe(rev())  // 修改 css 名字 
        .pipe(gulp.dest('./release/public/css'))
        .pipe(rev.manifest())
        .pipe(rename('css-manifest.json'))
        .pipe(gulp.dest('./release/rev'));// 记录 css 的变化
});

// 处理图片
gulp.task('image',function(){

    return gulp.src(['./public/images/**/*','./uploads/*'],{base: './'})
        .pipe(imagemin())
        .pipe(rev())  // 修改图片名字
        .pipe(gulp.dest('./release'))
        .pipe(rev.manifest())
        .pipe(rename('image-manifest'))
        .pipe(gulp.dest('./release/rev'));  // 记录 image 的变化
});

// 处理 js 
gulp.task('useref', function(){

    return gulp.src('./index.html')
        .pipe(useref())  // 去到 index 文件中写上处理js css,实现引入的合并
        .pipe(gulpif('*.js',uglify())) // 压缩操作
        .pipe(gulpif('*.js',rev()))
        .pipe(gulp.dest('./release'))
        .pipe(rev.manifest())
        .pipe(rename('js-manifest.json'))
        .pipe(gulp.dest('./release/rev'));
});

// 内容替换
gulp.task('rev', ['css','image','useref'], function(){

    gulp.src(['./release/rev/*.json', './release/index.html'],{base: './release'})
        .pipe(revCollector())
        .pipe(gulp.dest('./release'));
});

// 其他任务
gulp.task('other', function(){

   gulp.src(['./api/*','./public/fonts/*','./public/libs/*','./views/*.html'], {base: './release'})
        .pipe(gulp.dest('./release')); 
});

gulp.task('default',['rev','oher']);

// gulp.task('a', function(){
//     cosole.log('a');
// });
// gulp.task('b', function(){
//     console.log('b');
// });

gulp.task('all', ['a','b'], function(){  // all -> default
    console.log('all');
} )

// 在命令提示符中执行 gulp + 定义任务 指令执行任务

扩展

• gulp 是一个灵活的构建工具,通过简单的配置可以帮助我们实现合并,压缩,校验,预处理等一系列人物的软件工具
• 常见的工具包括: Grunt Gulp F.I.S(百度出品) webpack等