zoukankan      html  css  js  c++  java
  • gulp入门教程

    第1步:安装Node

    首先,最基本也最重要的是,我们需要搭建node环境。访问 nodejs.org,下载完成后直接运行程序,就一切准备就绪。npm会随着安装包一起安装,稍后会用到它。

    为了确保Node已经正确安装,我们执行几个简单的命令。

    1 node -v
    2 npm -v

    如果这两行命令没有得到返回,可能node就没有安装正确,进行重装。

    第2步:安装gulp

    首先我们要全局安装一遍:

    1 npm install -g gulp

    运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。

    1 gulp -v

    接着我们要进去到项目的根目录再安装一遍

    1 npm install gulp --save-dev

    第3步:新建gulpfile.js文件

    我们将要使用Gulp插件来完成我们以下任务:

    1. sass的编译(gulp-sass)
    2. 自动添加css前缀(gulp-autoprefixer)
    3. 压缩css(gulp-minify-css)
    4. js代码校验(gulp-jshint)
    5. 合并js文件(gulp-concat)
    6. 压缩js代码(gulp-uglify)
    7. 压缩图片(gulp-imagemin)
    8. 自动刷新页面(gulp-livereload)
    9. 图片缓存,只有图片替换了才压缩(gulp-cache)
    10. 更改提醒(gulp-notify)

    安装这些插件需要运行如下命令:

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

    更多插件可以看这里gulpjs.com/plugins/

    接着我们要创建一个gulpfile.js在根目录下,gulp只有四个API: taskwatchsrc,和 dest

    task 这个API用来创建任务,在命令行下可以输入 gulp test 来执行test的任务。
    watch 这个API用来监听任务。
    src 这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss, vender.scss],也可以是正则表达式/**/*.scss
    dest 这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。

    3.1 加载插件:

     1 // Load plugins
     2 var gulp = require('gulp'),
     3     sass = require('gulp-sass'),
     4     autoprefixer = require('gulp-autoprefixer'),
     5     minifycss = require('gulp-minify-css'),
     6     jshint = require('gulp-jshint'),
     7     uglify = require('gulp-uglify'),
     8     imagemin = require('gulp-imagemin'),
     9     rename = require('gulp-rename'),
    10     concat = require('gulp-concat'),
    11     notify = require('gulp-notify'),
    12     cache = require('gulp-cache'),
    13     livereload = require('gulp-livereload');

    3.2 建立任务:

    3.2.1 编译sass、自动添加css前缀和压缩

    首先我们编译sass,添加前缀,保存到我们指定的目录下面,还没结束,我们还要压缩,给文件添加 .min 后缀再输出压缩文件到指定目录,最后提醒任务完成了:

     1 // Styles任务
     2 gulp.task('styles', function() {
     3     //编译sass
     4     return gulp.src('stylesheets/main.scss')
     5     .pipe(sass())
     6     //添加前缀
     7     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
     8     //保存未压缩文件到我们指定的目录下面
     9     .pipe(gulp.dest('stylesheets'))
    10     //给文件添加.min后缀
    11     .pipe(rename({ suffix: '.min' }))
    12     //压缩样式文件
    13     .pipe(minifycss())
    14     //输出压缩文件到指定目录
    15     .pipe(gulp.dest('assets'))
    16     //提醒任务完成
    17     .pipe(notify({ message: 'Styles task complete' }));
    18 });

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

     1 // Scripts任务
     2 gulp.task('scripts', function() {
     3     //js代码校验
     4     return gulp.src('javascripts/*.js')
     5     .pipe(jshint())
     6     .pipe(jshint.reporter('default'))
     7     //js代码合并
     8     .pipe(concat('all.js'))
     9     //给文件添加.min后缀
    10     .pipe(rename({ suffix: '.min' }))
    11     //压缩脚本文件
    12     .pipe(uglify())
    13     //输出压缩文件到指定目录
    14     .pipe(gulp.dest('assets'))
    15     //提醒任务完成
    16     .pipe(notify({ message: 'Scripts task complete' }));
    17 });

    3.2.3 图片压缩

    1 // Images
    2 gulp.task('images', function() {
    3   return gulp.src('images/*')
    4     .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    5     .pipe(gulp.dest('images'))
    6     .pipe(notify({ message: 'Images task complete' }));
    7 });

    3.2.4 事件监听

     1 // Watch
     2 gulp.task('watch', function() {
     3   // Watch .scss files
     4   gulp.watch('stylesheets/*.scss', ['styles']);
     5   // Watch .js files
     6   gulp.watch('javascripts/*.js', ['scripts']);
     7   // Watch image files
     8   gulp.watch('images/*', ['images']);
     9   // Create LiveReload server
    10   livereload.listen();
    11   // Watch any files in assets/, reload on change
    12   gulp.watch(['assets/*']).on('change', livereload.changed);
    13 });

    完整代码:

     1 /*!
     2  * gulp
     3  * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
     4  */
     5 // Load plugins
     6 var gulp = require('gulp'),
     7     sass = require('gulp-sass'),
     8     autoprefixer = require('gulp-autoprefixer'),
     9     minifycss = require('gulp-minify-css'),
    10     jshint = require('gulp-jshint'),
    11     uglify = require('gulp-uglify'),
    12     imagemin = require('gulp-imagemin'),
    13     rename = require('gulp-rename'),
    14     concat = require('gulp-concat'),
    15     notify = require('gulp-notify'),
    16     cache = require('gulp-cache'),
    17     livereload = require('gulp-livereload');
    18 // Styles
    19 gulp.task('styles', function() {
    20     return gulp.src('stylesheets/main.scss')
    21     .pipe(sass())
    22     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    23     .pipe(gulp.dest('stylesheets'))
    24     .pipe(rename({ suffix: '.min' }))
    25     .pipe(minifycss())
    26     .pipe(gulp.dest('assets'))
    27     .pipe(notify({ message: 'Styles task complete' }));
    28 });
    29 // Scripts
    30 gulp.task('scripts', function() {
    31   return gulp.src('javascripts/*.js')
    32     .pipe(jshint())
    33     .pipe(jshint.reporter('default'))
    34     .pipe(concat('all.js'))
    35     .pipe(rename({ suffix: '.min' }))
    36     .pipe(uglify())
    37     .pipe(gulp.dest('assets'))
    38     .pipe(notify({ message: 'Scripts task complete' }));
    39 });
    40 // Images
    41 gulp.task('images', function() {
    42   return gulp.src('images/*')
    43     .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    44     .pipe(gulp.dest('images'))
    45     .pipe(notify({ message: 'Images task complete' }));
    46 });
    47 // Default task
    48 gulp.task('default', function() {
    49     gulp.start('styles', 'scripts', 'images');
    50 });
    51 // Watch
    52 gulp.task('watch', function() {
    53   // Watch .scss files
    54   gulp.watch('stylesheets/*.scss', ['styles']);
    55   // Watch .js files
    56   gulp.watch('javascripts/*.js', ['scripts']);
    57   // Watch image files
    58   gulp.watch('images/*', ['images']);
    59   // Create LiveReload server
    60   livereload.listen();
    61   // Watch any files in assets/, reload on change
    62   gulp.watch(['assets/*']).on('change', livereload.changed);
    63 });

    第4步:运行

    可以运行单独的任务,例如

    1 gulp default
    2 gulp watch

    也可以运行整个任务

    1 gulp

    总结

    1. 安装Node
    2. 安装gulp
    3. 新建gulpfile.js文件
    4. 运行

    最后是我自己设置的项目文件路径

     
    |--/assets/--------压缩后样式和脚本存放的目录
    |--/images/--------图片存放目录
    |--/javascripts/---脚本存放目录
    |--/stylesheets/---样式存放目录
    |--/plugin/--------插件存放目录
    |--gulpfile.js

    原文地址:https://segmentfault.com/a/1190000002698606

  • 相关阅读:
    CF1051F The Shortest Statement 题解
    CF819B Mister B and PR Shifts 题解
    HDU3686 Traffic Real Time Query System 题解
    HDU 5969 最大的位或 题解
    P3295 萌萌哒 题解
    BZOJ1854 连续攻击游戏 题解
    使用Python编写的对拍程序
    CF796C Bank Hacking 题解
    BZOJ2200 道路与航线 题解
    USACO07NOV Cow Relays G 题解
  • 原文地址:https://www.cnblogs.com/wxcbg/p/5846755.html
Copyright © 2011-2022 走看看