gulp全局安裝
gulp.js是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務
gulp.js是基於node.js構建的,利用node.js流的威力,可以快速構建項目
一、安裝步驟
1.cnpm install gulp -g //全局安裝:偽為了執行gulp任務
2.cnpm install gulp //本地安裝:為了調用gulp插件的功能
3.gulp -v //查看版本號,出現版本號即為安裝成功
二、新建package.json文件
說明:package.json是基於nodejs項目必不可少的配置文件,它是存放在項目根目錄的普通json文件
註意:json文件內是不能寫註釋的,復制以下內容需要刪除註釋
1. 通過 cnpm init創建package.json文件
2.查看package.json幫助文檔,命令提示符執行cnpm help package.json
特別註意:package.json是一個普通json文件,所以不能添加任何註釋。參看 http://www.zhihu.com/question/23004511
四、新建gulfile.js文件(重要)
說明:gulpfile.js是gulp項目的配置文件,是位於項目根目錄的普通js文件(其實將gulpfile.js放入其他文件夾下亦可)
‘use strict‘; // 載入外掛 var gulp = require(‘gulp‘), webserver= require(‘gulp-webserver‘), sass = require(‘gulp-sass‘), minifycss = require(‘gulp-minify-css‘), //css壓縮 cssimport = require("gulp-cssimport"), //imagemin = require(‘gulp-imagemin‘), //圖片壓縮 //uglify = require(‘gulp-uglify‘), //js壓縮 concat = require(‘gulp-concat‘), //文件合並 notify = require(‘gulp-notify‘), //提示信息 livereload = require(‘gulp-livereload‘) //網頁自動刷新(服務器控制客戶端同步刷新) //使用webserver啟動一個Web服務器 gulp.task(‘webserver‘, function() { gulp.src(‘‘) //src--root dir .pipe(webserver({ path: ‘/‘, host: ‘127.0.0.1‘, port: ‘8081‘, livereload: true, directoryListing: true, open: true })); }); //檢查文件 gulp.task(‘html‘, function () { gulp.src(‘./**/*.html‘) .pipe(webserver()); }); // 編譯Scss gulp.task(‘sass‘, function(){ //sass()方法用於轉換sass到css return gulp.src(‘css/main.scss‘) .pipe(sass()) // Converts Sass to CSS with gulp-sass .pipe(gulp.dest(‘dist/css‘)) }); // 默認任務 gulp.task(‘default‘,[‘webserver‘,‘watch‘]); // 監聽文件變化 gulp.task(‘watch‘, function() { // 看守所有.scss檔 gulp.watch([‘./css/*.scss‘],[‘sass‘]); gulp.watch([‘./*.html‘], [‘html‘]); });
五、gulp環境下安裝sacc
1.首先全局環境下配置淘寶鏡像(註意:這裏的是全局環境,不是項目根目錄)
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.進入項目根目錄安裝
cnpm install --save-dev node-sass
3.在項目根目錄下安裝
npm install --save-dev gulp-sass
4.gulp運行(運行成功後會自動打開一個網頁)
配置完成
gulp全局安裝