- 下載 node.js , https://nodejs.org/en/,並安裝 msi
- 一下命令都屬於 dos 命令
- node -v,npm -v,檢驗是否下載成功(出現版本號)
- 將 npm 鏡像到淘寶 npm install cnpm -g --registry=https://registry.npm.taobao.org
- 然後用 cnpm 代替 npm使用
- 原因是 npm 是國外服務器
- 安裝 gulp 到全局 cnpm install gulp -g
- 檢驗安裝 gulp -v
- 切換到 文件項目目錄下,cnpm install gulp --save-dev
- 安裝插件:插件很多,
- cnpm install gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
- 在項目根目錄創建gulpfile.js文件
-
var gulp = require('gulp'); gulp.task('default', function() { console.log('hello world'); });
運行gulp,檢驗
- 使用數組的方式來匹配多種文件, 可以用正則和!,
具體代碼
-
//var gulp = require('gulp'); // //gulp.task('default', function() { // console.log('hello world'); //}); // 引入 gulp及組件 var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), //壓縮css //jshint = require('gulp-jshint'), //js代碼校驗 uglify = require('gulp-uglify'), //壓縮JS imagemin = require('gulp-imagemin'), //壓縮圖片 rename = require('gulp-rename'), //合併js文件 // concat = require('gulp-concat'), // 將多個文件合併爲1個 notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'), del = require('del'); // Styles gulp.task('styles', function() { return gulp.src('src/styles/**/**/**/**/**/**/**/**/**/*.css') .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('dist/styles')) .pipe(notify({ message: 'Styles task complete' })); }); // Scripts gulp.task('scripts', function() { return gulp.src('src/scripts/**/**/**/**/**/**/**/**/*.js') //.pipe(jshint('.jshintrc')) // .pipe(jshint.reporter('default')) // .pipe(concat('main.js')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(notify({ message: 'Scripts task complete' })); }); // Images gulp.task('images', function() { return gulp.src('src/images/**/*') .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) .pipe(gulp.dest('dist/images')) .pipe(notify({ message: 'Images task complete' })); }); // Clean 任務執行前,先清除之前生成的文件 gulp.task('clean', function(cb) { del(['dist/**/**/**/**/**/**/*'], cb) }); // Default task 設置默認任務 gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); }); // Watch 監聽 gulp.task('watch', function() { // Watch .scss files gulp.watch('src/styles/**/**/**/**/**/**/**/**/**/**/*.css', ['styles']); // Watch .js files gulp.watch('src/scripts/**/**/**/**/**/**/**/**/**/**/**/*.js', ['scripts']); // Watch image files gulp.watch('src/images/**/**/**/**/**/**/**/**/**/**/*', ['images']); // Create LiveReload server livereload.listen(); // Watch any files in dist/, reload on change gulp.watch(['dist/**']).on('change', livereload.changed); });