1、安裝 Node.js node-v 查看 Node 版本 當前穩定版本 4.4.7

?

2、Bower
　　安裝: ?

　　npm i -g cnpm //使用國內鏡像源 可省略
　　 cnpm i -g bower

　　常用命令： bower init bower install bower uninstall

3、安裝 Git 版本管理工具并創建一個倉庫

?

4、cd到項目文件中

　　bower init //初始化 生成 bower.json 配置文件

?

5、用 Bower 下載文件

　　路徑配置：
　　　　創建 ?.bowerrc 文件

　　{"directory":"lib" //bower 下載保存路徑}

?

bower install --save angular (#1.2 +版本號)
　　 bower install --save angular-validation (angular 表單效驗)

?

6、安裝自動化構建工具 gupl

cnpm i -g gulp

　　安裝 gulp 插件

npm init //生成一個配置文件cnpm i --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-less gulp-imagemin gulp-load-plugins gulp-uglify gulp-plumber open

　　編寫任務于?gulpfile.js 中 ?用于 less、js 的編譯 合并和圖片的壓縮

　　

var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var open = require('open');var app = {srcPath: 'src/',devPath: 'build/',prdPath: 'dist/' };gulp.task('lib', function() {gulp.src('bower_components/**/*.js').pipe(gulp.dest(app.devPath + 'vendor')).pipe(gulp.dest(app.prdPath + 'vendor')).pipe($.connect.reload()); }); gulp.task('html', function() {gulp.src(app.srcPath + '**/*.html').pipe(gulp.dest(app.devPath)).pipe(gulp.dest(app.prdPath)).pipe($.connect.reload()); })gulp.task('json', function() {gulp.src(app.srcPath + 'data/**/*.json').pipe(gulp.dest(app.devPath + 'data')).pipe(gulp.dest(app.prdPath + 'data')).pipe($.connect.reload()); })gulp.task('less', function() {gulp.src(app.srcPath + 'style/index.less').pipe($.plumber()).pipe($.less()).pipe(gulp.dest(app.devPath + 'css')).pipe(gulp.dest(app.prdPath + 'css')).pipe($.connect.reload()); });gulp.task('js', function() {gulp.src(app.srcPath + 'script/**/*.js').pipe($.plumber()).pipe($.concat('index.js')).pipe(gulp.dest(app.devPath + 'js')).pipe($.uglify()).pipe(gulp.dest(app.prdPath + 'js')).pipe($.connect.reload()); });gulp.task('image', function() {gulp.src(app.srcPath + 'image/**/*').pipe(gulp.dest(app.devPath + 'image')).pipe($.imagemin()).pipe(gulp.dest(app.prdPath + 'image')).pipe($.connect.reload()); });gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);gulp.task('clean', function() {gulp.src([app.devPath, app.prdPath]).pipe($.clean()) });gulp.task('serve', ['build'], function() {$.connect.server({root: [app.devPath],livereload: true,port: 8577});open('http://localhost:8577');gulp.watch('bower_components/**/*', ['lib']);gulp.watch(app.srcPath + '**/*.html', ['html']);gulp.watch(app.srcPath + 'data/**/*.json', ['json']);gulp.watch(app.srcPath + 'style/**/*.less', ['less']);gulp.watch(app.srcPath + 'script/**/*.js', ['js']);gulp.watch(app.srcPath + 'image/**/*', ['image']); });gulp.task('default', ['serve']);

?

?

7、 啟動 gulp

　　gulp

?

目錄結構圖

　　　　

?

轉載于:https://www.cnblogs.com/lishalom/p/6617758.html

總結

以上是生活随笔為你收集整理的Gulp 前端自动化构建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。