Gulp学习--压缩js，css，img

gulp是基于node实现Web前端自动化开发的工具，利用他能够极大的提高开发效率。
由于gulp是基于node，所以开始之前应该确定本机已安装好node

安装gulp
npm install gulp
安装js压缩模块 –gulp-uglify
node install gulp-uglify
安装css压缩模块 –gulp-minify-css
node install gulp-minify-css
安装img压缩模块 –gulp-imagemin
node install gulp-imagemin
/*注释
如果安装失败 可改用sudo命令安装
*/

gulp规律
1.找到js/,css/,img/目录下的所有文件
2.压缩这些文件
3.将压缩后的文件另存为到对应目录下

编写gulp代码
gulp的所有配置代码都写在gulpfile.js文件

以压缩js文件为例
一、新建一个 gulpfile.js 文件
二、在 gulpfile.js 中编写代码

var gulp = require('gulp')

三、获取 gulp-uglify 组件

var uglify = require('gulp-uglify')

四、创建压缩任务

gulp.task('script',function(){ //gulp.task(name,fn) -定义任务，第一个参数是任务名，第二个参数是任务内容
    //1.找到文件
    gulp.src('js/*.js')  //gulp.src(path) 选择文件，参数是文件路径
    //2.压缩文件
        .pipe(uglify())  //gulp.pipe()管道，可理解为将操作加入执行队列
    //3.另存为压缩后的文件
        .pipe(gulp.dest('dist/js')) //gulp.dest(path) 输出文件
})

五、检测代码修改自动执行任务
可以使用gulp.watch(src, fn)检测指定目录下文件的修改后执行任务。

gulp.task('auto',function(){
    gulp.watch('js/*.js',['script'])
})

六、使用gulp.task(‘default’,fn)定义默认任务

gulp.task('default',['script','auto']);

此时就可以再命令行中直接输入gulp+回车，执行script和auto任务

最终代码如下：

// 获取 gulp
var gulp = require('gulp')

// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')

// 压缩 js 文件
// 在命令行使用 gulp script 启动此任务
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 压缩文件
        .pipe(uglify())
    // 3. 另存压缩后的文件
        .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
    // 监听文件修改，当文件被修改则执行 script 任务
    gulp.watch('js/*.js', ['script'])
})

// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 script 任务和 auto 任务
gulp.task('default', ['script', 'auto'])

完整压缩js，css，img代码

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');

gulp.task('script',function(){
    gulp.src("src/js/*.js")
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
});

gulp.task('css',function(){
    gulp.src('src/css/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest("dist/css"))
});

gulp.task('images',function(){
    gulp.src('src/img/*.*')
        .pipe(imagemin({
            progressive:true
        }))
        .pipe(gulp.dest('dist/img'))
});

gulp.task('auto',function(){
    gulp.watch('src/js/*.js',['script']);
    gulp.watch('src/css/*.css',['css']);
    gulp.watch('src/img/*.*',['images'])
})

gulp.task('default',['script', 'css', 'images', 'auto']);