gulp详细入门教程

网址介绍

　　http://www.ydcss.com/archives/18

　  1.具体gulp的安装配置和使用方法都在链接中，我就不献丑了

　　2.一直在看一点的教程学习，给大家推荐，内容简洁，非常适合初学者

　  3.自己总结了一些gulp工具

　　　　首先加载  var gulp = require('gulp'); //加载gulp

　　　　

　　　　（1）： gulp-uglify （JS压缩） 安装：npm install --save-dev gulp-uglify

　　　　　　　　

　　　　　　　　var uglify = require('gulp-uglify'); //加载js压缩

　　　　　　　　// 定义一个任务 compass

　　　　　　　　gulp.task('compass', function () {

　　　　　　　　　　gulp.src(['js/*.js','!js/*.min.js']) //获取文件，同时过滤掉.min.js文件

        　　　　　　.pipe(uglify())
       　　　　　　 .pipe(gulp.dest('javascript/'));  //输出文件
　　　　　　　　});
　　　　　　　　小技巧，第二个参数'！js/*.min.js'是用来过滤掉后缀为min.js，！感叹号为排除模式。

　　　　（2）： gulp-minify-css（CSS压缩） 安装：npm install --save-dev gulp-minify-css

　　　　　　　　minify = require('gulp-minify-css');

　　　　　　　　gulp.task('cssmini', function () {

　　　　　　　　　　gulp.src(['css/*.css', '!css/*.min.css']) //要压缩的css

       　　　　　　 .pipe(minify())
       　　　　　　 .pipe(gulp.dest('buildcss/'));
　　　　　　　　});

　　　　（3）：gulp-minify-html（html压缩）安装：npm install --save-dev gulp-minify-html

　　　　　　　　htmlmini = require('gulp-minify-html');

　　　　　　　　gulp.task('htmlmini', function () {

    　　　　　　　　gulp.src('*.html')
       　　　　　　 .pipe(htmlmini())
       　　　　　　 .pipe(gulp.dest('minihtml'));
　　　　　　　　})

　　　　（4）：gulp-jshint（JS代码检查）安装：npm install --save-dev gulp-jshint

　　　　　　　　jshint = require("gulp-jshint");

　　　　　　　　gulp.task('jsLint', function () {
    　　　　　　　　gulp.src('js/*.js')
   　　　　　　　　 .pipe(jshint())
    　　　　　　　　.pipe(jshint.reporter()); // 输出检查结果
　　　　　　　　});

　　　　（5）：gulp-concat（文件合并）安装：npm install --save-dev gulp-concat

　　　　　　　　　concat = require("gulp-concat");

　　　　　　　　gulp.task('concat', function () {
   　　　　　　　　 gulp.src('js/*.js')  //要合并的文件
   　　　　　　　　 .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
   　　　　　　　　 .pipe(gulp.dest('dist/js'));
　　　　　　　　});

　　　　（6）：gulp-less（编译Less）安装：npm install --save-dev gulp-less

　　　　　　　　　less = require("gulp-less");

　　　　　　　　gulp.task('compile-less', function () {
    　　　　　　　　gulp.src('less/*.less')
    　　　　　　　　.pipe(less())
    　　　　　　　　.pipe(gulp.dest('dist/css'));
　　　　　　　　});

　　　　（7）：gulp-sass（编译Sass）安装：npm install --save-dev gulp-sass

　　　　　　　　sass = require("gulp-sass");

　　　　　　　　gulp.task('compile-sass', function () {

 　　　　　　　　gulp.src('sass/*.sass')

　　　　　　　　　　　.pipe(sass())

　　 　　　　　　　　　.pipe(gulp.dest('dist/css'));

　　　　　　　　});

　　　　（8）：gulp-imagemin（压缩图片） 安装：npm install --save-dev gulp-imagemin （压缩jpg、png、gif）和 $npminstall--save-devimagemin-pngquant（压缩png）

　　　　　　var imagemin = require('gulp-imagemin');
　　　　　　var pngquant = require('imagemin-pngquant'); //png图片压缩插件
　　　　　　gulp.task('default', function () {
    　　　　　　return gulp.src('src/images/*')
        　　　　.pipe(imagemin({
           　　　　　　 progressive: true,
           　　　　　　 use: [pngquant()] //使用pngquant来压缩png图片
       　　　　　}))
       　　　　 .pipe(gulp.dest('dist'));
　　　　　　});

　　　　（9）：gulp-livereload（自动刷新）安装：npm install --save-dev gulp-livereload

　　　　　　less = require('gulp-less'),
   　　　　 livereload = require('gulp-livereload');
　　　　　　gulp.task('less', function() {
  　　　　　　　gulp.src('less/*.less')
    　　　　　　.pipe(less())
   　　　　　　 .pipe(gulp.dest('css'))
  　　　　　　  .pipe(livereload());
　　　　　　});
　　　　　　gulp.task('watch', function() {
 　　　　　　 　livereload.listen(); //要在这里调用listen()方法
 　　　　　　 　gulp.watch('less/*.less', ['less']);  //监听目录下的文件，若文件发生变化，则调用less任务。
　　　　　　});