gulp学习笔记2-安装

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1、去nodejs官网安装nodejs

2、打开命令行，OSX是终端，windows是命令提示符（window + r 输入cmd回车）

3、使用npm（nodejs的包管理器），或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org

4、全局安装gulp：(c)npm install gulp -g

5、新建package.json到项目根目录【非必选】（josn文件需删除注释，此用来记录项目信息和配置初始插件）

 {
   "name": "test",   //项目名称（必须）
   "version": "1.0.0",   //项目版本（必须）
   "description": "This is for study gulp project !",   //项目描述（必须）
   "homepage": "",   //项目主页
   "repository": {    //项目资源库
     "type": "git",
     "url": "https://git.oschina.net/xxxx"
   },
   "author": {    //项目作者信息
     "name": "surging",
     "email": "surging2@qq.com"
   },
   "license": "ISC",    //项目许可协议
   "devDependencies": {    //项目依赖的插件
     "gulp": "^3.8.11",
     "gulp-less": "^3.0.0"
   }
 }

6、本地项目安装，命令行定位项目目录后执行：(c)npm install --save-dev（根据package.json的配置，安装组件到项目）

　　若忽略第五步，则这里只执行：(c)npm install gulp --save-dev（仅安装gulp到项目）


7、安装需要的gulp组件（绿色部分为需要安装的组件）另sass编译需提前安装ruby。（如第五步配置完成，此步忽略）

npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload --save-dev

8、新建gulpfile.js【必选重要】

 /*!
  * gulp
  * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload --save-dev
  */
 // 加载插件
 var gulp = require('gulp'),//加载gulp
     sass = require('gulp-sass'),//编译sass
     autoprefixer = require('gulp-autoprefixer'),//补全浏览器前缀
     minifycss = require('gulp-minify-css'),//压缩css为min
     spriter = require('gulp-css-spriter'),//图片合并css精灵
     jshint = require('gulp-jshint'),//js查错
     uglify = require('gulp-uglify'),//压缩js
     imagemin = require('gulp-imagemin'),//压缩图片
     rename = require('gulp-rename'),//重命名gulp
     concat = require('gulp-concat'),//合并js
     html = require('gulp-htmlmin'),//压缩HTML
     notify = require('gulp-notify'),//显示信息
     cache = require('gulp-cache'),//压缩图片过滤（仅修改图片压缩）
     livereload = require('gulp-livereload');// 网页自动刷新

 //处理样式
 gulp.task('styles', function() { var timestamp = +new Date();
     return gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件
         .pipe(sass())
         .pipe(autoprefixer({browsers:['last 3 versions','ie >= 10','ie_mob >= 10','ff >= 30','chrome >= 34','safari >= 6','opera >= 12.1','ios >= 6','android >= 4.4','bb >= 10','and_uc 9.9']}))//支持浏览器种类
         .pipe(rename({ suffix: '.min' }))//重命名加min后缀
 //        .pipe(spriter({
 //            'spriteSheet': 'images/sprite'+timestamp+'.png',// 生成的spriter的位置
 //            'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png'// 生成样式文件图片引用地址的路径,如：backgound:url(../images/sprite20324232.png)
 //        }))
         .pipe(minifycss({keepBreaks: true}))//分行显示
         .pipe(gulp.dest('css'))//保存到指定目录
         .pipe(notify({ message: 'Styles task complete' }));//打印信息
 });

 ////图片精灵
 //gulp.task('spriter',function() {
 //    var timestamp = +new Date();
 //    //需要自动合并雪碧图的样式文件
 //    return gulp.src('css/*.css')
 //        .pipe(spriter({
 //            // 生成的spriter的位置
 //            'spriteSheet': 'images/sprite'+timestamp+'.png',
 //            // 生成样式文件图片引用地址的路径,如：backgound:url(../images/sprite20324232.png)
 //            'pathToSpriteSheetFromCSS': 'images/sprite'+timestamp+'.png'
 //        }))
 //        .pipe(minifycss())
 //        .pipe(gulp.dest('css'));
 //});

 //处理js
 gulp.task('scripts', function() {
     return gulp.src('script/**/*.js')
         .pipe(jshint())
         .pipe(jshint.reporter('default'))
         //.pipe(concat('all.js'))
         .pipe(rename({ suffix: '.min' }))
         .pipe(uglify())
         .pipe(gulp.dest('js'))
         .pipe(notify({ message: 'Scripts task complete' }));
 });

 //处理图片
 //gulp.task('images', function() {
 //    return gulp.src(['pic/**/*.png','pic/**/*.jpg'])
 //        .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
 //        .pipe(gulp.dest('images'))
 //        .pipe(notify({ message: 'Images task complete2' }));
 //});

 //默认执行
 gulp.task('default', function() {
     gulp.start('styles', 'scripts');
 });

 // 监测变更执行gulp
 gulp.task('watch', function() {
     gulp.watch('style/**/*.scss', ['styles']);//处理样式
     gulp.watch('script/**/*.js', ['scripts']);//处理js
     //gulp.watch('pic/**', ['images']);//处理图片
     // Create LiveReload server
     livereload.listen();
     // Watch any files in assets/, reload on change
     gulp.watch(['style/**/*.scss','script/**/*.js']).on('change', livereload.changed);
 });

9、执行gulp，命令行指定项目目录后执行：gulp+回车=进行单次编译

10、gulp watch监听文件修改自动执行，Ctrl+C停止监听

以上内容来自网络整理及实际操作，如有不当欢迎讨论