gulp初步理解与配置

昨天突然发现gulp太强大了， 折腾了一下。 找了一些教程， 下面是我的粗苯理解。如有错误， 请见谅。 gulp是依赖nodejs的， 所以

 

1. 首先得先去下载nodejs， 安装，打开command prompt 安装glup   (npm install gulp --save-dev);  node -v 检查node是否安装成功

 

node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。PS：未能出现版本号，请尝试注销电脑重试；

npm -v查看npm的版本号，npm是在安装nodejs时一同安装的nodejs包管理器，那它有什么用呢？稍后解释；

cd定位到目录，用法：cd + 路径 ；

dir列出文件列表；

cls清空命令提示符窗口内容

 

2. 打开到相应的目录 D:\wamp\www\new 使用dir检测是否到了相应的目录

 

 

 

 

 

 

 

 

5. cnpm init新建文件package.json配置项目信息

 

 

7. 然后新建一个gulpfile.js文件存在即将使用的项目的根目录下面。  下面是我的一些初步理解与一些基本的安装包介绍 

 

// $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

 

// .pipe() 导向

//gulp.dest() 目标牡蛎

//gulp.src() 源文件目录

 

 

//设置一个初始化src目录，存放源文件（包含images， styles, scripts）

 

//1 css 编译

//导入工具包 require('node_modules里对应模块')

var gulp = require('gulp'), //本地安装用到的

    sass = require('gulp-ruby-sass'),

    autoprefixer = require('gulp-autoprefixer'),

    minifycss = require('gulp-minify-css'),

    jshint = require('gulp-jshint'),

    uglify = require('gulp-uglify'),

    imagemin = require('gulp-imagemin'),

    rename = require('gulp-rename'),

    concat = require('gulp-concat'),

    notify = require('gulp-notify'),

    cache = require('gulp-cache'),

    livereload = require('gulp-livereload'),

    del = require('del');

 

//定义一个testLess任务（自定义任务名称）

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

return gulp.src('css/sass/gulp.scss') //该任务针对的文件

//return gulp.src('css/sass/gulp.scss, index.scss') //该任务针对的文件 加载两个文件

//return gulp.src('css/**/*.scss, index.scss') //加载多个文件

 

        .pipe(sass({style：'expend'})) //该任务调用的模块

.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))；

        .pipe(gulp.dest('css/css')); //将会在src/css下生成index.css

.pipe(rename({suffix: '.min'})) 

.pipe(minifycss()) //压缩成min

.pipe(gulp.dest('css/cssmin')) //生成的min文件

.pipe(notify({ message: 'Styles task complete' }));

});

 

gulp.task('default',['testSass', 'elseTask']); //定义默认任务

 

//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数

//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 

//gulp.dest(path[, options]) 处理完后文件生成路径

 

 

// js代码校验、合并和压缩

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

  return gulp.src('src/js/**/*.js')

    .pipe(jshint('.jshintrc'))

    .pipe(jshint.reporter('default'))

    .pipe(concat('main.js'))

    .pipe(gulp.dest('dist/assets/js'))

    .pipe(rename({suffix: '.min'}))

    .pipe(uglify())

    .pipe(gulp.dest('dist/assets/js'))

    .pipe(notify({ message: 'Scripts task complete' }));

});

 

 

//图片压缩

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

  return gulp.src('src/img/**/*')

.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })) //对所有图片进行压缩  

.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))) //新建或者修改过的图片才进行压缩

.pipe(gulp.dest('dist/assets/img'))

.pipe(notify({ message: 'Images task complete' }));

});

 

//清除文件--在任务执行前，最好先清除之前生成的文件：

gulp.task('clean', function(cb) {

    del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)

});

 

//设置默认任务（default）

gulp.task('default', ['clean'], function() {

    gulp.start('styles', 'scripts', 'images');

});

 

//监听文件

 

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

  // Watch .scss files

  gulp.watch('src/styles/**/*.scss', ['styles']);

  // Watch .js files

  gulp.watch('src/scripts/**/*.js', ['scripts']);

  // Watch image files

  gulp.watch('src/images/**/*', ['images']);

});

 

 

//实现自动刷新页面 修改watch 任务

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

  // Create LiveReload server

  livereload.listen();

  // Watch any files in dist/, reload on change

  gulp.watch(['dist/**']).on('change', livereload.changed);

});