Gulp任务合并Javascript和框架

Question

我完全是WebDev和Gulp的新手。我目前正在创建一个自己的实验项目。我想使用Angular 1和Bootstrap。到目前为止我所做的是通过NPM安装Bootstrap。创建一个main.less文件，在这里我导入Bootstrap.less文件和我自己所有较少的文件。这个main.less文件将被编译成一个公共的CSS文件，并通过gulp-inject注入index.html。

Now to the Javascript-Part。我也想有一个Javascript-File被注入index.html。

首先这是建议，还是应该自动注入我将创建的所有JavaScript文件？

如何解决我的框架？我知道我可以在例如一个Javascript文件中做require('angular')。但我在哪里把这个？

Answer 1

有很多事情，你试图一次全部学习。在提出下一部分之前，我建议先取下一部分。如果您刚刚开始学习Web开发，则尤其如此。

我会建议学习，然后首先确定您的构建环境，因为它将为您提供有价值的工具，这将为您节省大量时间。

如果您还没有安装一饮而尽但你需要通过NPM像下面的安装：

npm install gulp --save-dev 

注：您可能需要使用sudo NPM如果安装一饮而尽--save-dev的根据您的操作系统和环境，您将收到安装npm软件包的错误。

--save-dev部分将引用您的package.json文件中的开发依赖项。这将允许任何正在他们的系统上设置项目的人进行npm install，他们应该获得运行安装在系统上的项目所需的所有依赖关系。

下面列出了您希望通过前面描述的npm install package-name --save-dev方法来安装的东西。

npm install gulp --save-dev (needed for to run gulp commands) 

npm install gulp-less --save-dev (compiles your less files in to css) 

npm install gulp-concat --save-dev (concats your js files into one file) 

npm install gulp-uglifiy --save-dev (compresses, minifies your js file) 

npm install gulp browser-sync --save-dev (loads your project using a http server and enables hot reloading of the page.) 

UPDATE：作为一种替代的一个，你可以使用下面的package.json文件安装以上套餐之一。只要将它放在你的项目的根，然后键入您的命令行安装NPM（你可以有须藤NPM根据您的系统上安装使用。

的package.json

"name": "bootstrap-angular-less", 
    "version": "1.0.0", 
    "description": "Basic Angular 1 build package with support for bootstrap and less.", 
    "main": "index.html", 
    "dependencies": { 
    "angular": "^1.5.8", 
    "bootstrap": "^3.3.7", 
    "gulp": "^3.9.1" 
    }, 
    "devDependencies": { 
    "browser-sync": "^2.13.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-less": "^3.1.0", 
    "gulp-uglify": "^1.5.4", 
    "gulp-util": "^3.0.7", 
    "path": "^0.12.7" 
    }, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Larry J Lane", 
    "license": "ISC" 
} 

所有已安装的后的依赖关系，使文件名gulpfile.js并将其放置在你的项目的根目录。该文件被创建后，里面添加了以下代码。

**gulpfile.js** 


//require all of the gulp modules 
var gulp = require('gulp'); 
var browserSync = require('browser-sync'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var less = require('gulp-less'); 
var util = require('gulp-util'); 
var path = require('path'); 




var dirs = { 
    src: './app/src', 
    dest: './app/build' 
}; 

var jsPaths = { 

jsSrc: dirs.src + "/assets/js/*.js", 
jsDest: dirs.dest + "/assets/js/" 

}; 

var lessPaths = { 
    src: dirs.src + "/assets/less/main.less", 
    dest: dirs.dest + "/assets/styles/" 
}; 

var templatePaths = { 

    src: dirs.src + "/*.html", 
    dest: dirs.dest + "/" 

} 



// Browsersync server that watches CSS, HTML, and JS 
gulp.task('server', ['html','css','js'],function() { 


    browserSync.init({ 

     server: { 
     baseDir: dirs.dest, 
     serveStaticOptions: { 
      extensions: ['html'] 
     } 
    } 
    }); 


    gulp.watch(dirs.src + "/assets/less/**/*.less", ['css']); 

    gulp.watch(dirs.src + "/assets/js/*.js", ['js']); 

    gulp.watch(templatePaths.src, ['html']); 

    browserSync.watch(templatePaths.dest + '*.html').on('change', browserSync.reload); 

}); 

// CSS Preprocessing. Uses Less to pre-process and pipes stream to Browsersync. 
gulp.task('css', function() { 
    return gulp.src(lessPaths.src) 
    .pipe(less()) 
    .pipe(concat('main.css')) 
    .pipe(gulp.dest(lessPaths.dest)) 
    .pipe(browserSync.stream()); 
}); 

//HTML processing. 
gulp.task('html', function() { 

    return gulp.src(templatePaths.src) 
     .pipe(gulp.dest(templatePaths.dest)); 
}); 


gulp.task('js', function() { 

    return gulp.src([jsPaths.jsSrc]) 
    .pipe(concat('bundler.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest(jsPaths.jsDest)) 
    .pipe(browserSync.stream()); 

}); 

//Default task that will run when type gulp in the command line. 
gulp.task('default', ['server']); 

接下来，您将需要创建中的几个文件夹RO你的项目的一部分。创建一个名为app的文件夹，并在其中放置两个新文件夹。第一个应该命名为build，第二个是src。您将从src文件夹中完成所有的开发工作。创建这些文件夹之后，在src文件夹中放置一个名为index.html的文件，其中包含以下内容。

的index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>A basic gulp browser sync build template</title> 
<link href="/assets/styles/main.css" type="text/css" rel ="stylesheet"> 
</head> 
<body> 


This is a basic gulp browser sync build template with support for less. 

<script type="text/javascript" src="/assets/js/bundler.js"></script> 
</body> 
</html> 

一旦全部放在一起，在命令行中键入一饮而尽，它应该载入您的浏览器内的项目。对app/src/assets/styles/less /中的index.html，less文件所做的任何更改，app/src/assets/js中的javascript文件都将自动更新并显示在浏览器中。 Less文件夹内的所有少量文件将被编译到一个名为main.css的文件中，并且js文件夹内的所有js文件将被编译为一个名为bundler.js的JavaScript文件。

您希望加载的文件少于bootstrap中较少的文件，例如您可以通过导入加载main.less文件。下面的例子来自main.less文件。

main.less

//import less files 
@import 'partials/_globals.less'; 

你自己的CSS，你需要在文件夹泛音放置较少夹中的所有文件。我试图让这个结构尽可能简单，所以看看周围，让我知道你是否有问题。

也就是说它现在把它的试驾，看看它是如何工作的，如果你认为它会为你工作，那么我们可以在其上添加角整合工作...