gulp一些内容

gulp运行时报缺少某个模块的错，解决办法：直接安装模块就好。

创建package.json文件   npm init


cnpm install gulp-sass --save-dev


cnpm install gulp-rename --save-dev


cnpm install gulp-minify-css --save-dev


cnpm install gulp-autoprefixer --save-dev


cnpm install gulp-jshint --save-dev


cnpm install gulp-uglify --save-dev


cnpm install gulp-imagemin --save-dev


cnpm install gulp-livereload --save-dev


cnpm install gulp-notify --save-dev


cnpm install gulp-watch --save-dev


cnpm install gulp-ruby-sass --save-dev


sass的编译（gulp-sass）
less编译 （gulp-less）
重命名（gulp-rename）
自动添加css前缀（gulp-autoprefixer）
压缩css（gulp-minify-css）
js代码校验（gulp-jshint）
合并js文件（gulp-concat）
压缩js代码（gulp-uglify）
压缩图片（gulp-imagemin）
自动刷新页面（gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）
图片缓存，只有图片替换了才压缩（gulp-cache）
更改提醒（gulp-notify）

'use strict';

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat'); 
// 引入依赖包
var sass = require('gulp-sass');
// 压缩图片
var imagemin = require('gulp-imagemin');
// 图片精灵
var spritesmith = require('gulp.spritesmith');
// 压缩js
var uglify = require('gulp-uglify');


gulp.task('minifyjs', function() {
   gulp.src('src/*.js')
      .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
      .pipe(uglify())    //压缩
      .pipe(gulp.dest('creat'));  //输出g
});


//  sass转换成css
gulp.task('sass', function(){
    //sass()方法用于转换sass到css
  return gulp.src('css/w.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('css')); // 保存路径
});


// 压缩css
gulp.task('minifycss', function() {
   gulp.src('css/*.css')   //压缩的文件
       .pipe(minifycss())  //执行压缩
       .pipe(gulp.dest('creat'));     //输出文件夹       
});
// 合并js
gulp.task("taskName",function(){
    // 把1.js和2.js合并为main.js，输出到dest/js目录下
    gulp.src(['js/1.js','js/2.js']).pipe(concat('main.min.js')).pipe(gulp.dest('js'));
});
// js压缩
gulp.task('minifyjs', function() {
    gulp.src('js/*.js') // 1. 找到文件
    .pipe(uglify()) // 2. 压缩文件
    .pipe(gulp.dest('creat')) // 3. 另存压缩后的文件
});
// 压缩图片
gulp.task('images', function () {
gulp.src('img/123456.png')// 1. 找到图片
.pipe(imagemin({progressive: true}))// 2. 压缩图片
.pipe(gulp.dest('images'))// 3. 另存图片
});
//  图片精灵
gulp.task('sprite', function () {
  //需要合并的图片地址
  var spriteData = gulp.src('sprite/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css'
  }));
  return spriteData.pipe(gulp.dest('images'));//保存合并后对于css样式的地址图片的地址
});
// 监听scss,js,css变化
gulp.task('watch',function(){
   gulp.watch('css/*.scss',['sass']);// 监听的文件
   gulp.watch('css/*.css',['minifycss']);// 监听的文件
   gulp.watch('js/*.js',['minifyjs']);
});